Im trying to get a div move up and down from its current position during a mouse hover event - I have the followng but it only works once and then stops as opposed to continually cycling?
tiptitle.stop(true, true).animate({
'top': '5px'
}, 100).stop(true, true).animate({
'top': '0px'
}, 100);
make an infinite loop
function animate(isOpen) {
tiptitle.stop().animate({'top': isOpen ? '5px' : '0px'}, 100, function() { animate(!isOpen); })
}
Related
I have panel which contains huge scrollable data, once scroll down the content and collapse the panel/come from other page then data is setting to top, scroll down remains same, its not resetting to top position.
I have tried below code but no luck
please anybody help me to get resolve this
$('#techAssmnt').on('show.bs.collapse', function (e) {
//setTimeout(function(){
//$("techAssmnt").animate({
//scrollTop: $('#page-top-wrapper').offset().top
//}, 800, 'swing',
//function() {});
//},500);
//$( "div.assessmentMainDiv" ).scrollTop( 0 );
//$("#Section_1").animate({ scrollTop: 0 }, "slow");
$("#Section_1").animate({ scrollTop:
$('#templateCollapse3262').offset().top }, 800, 'swing', function() {
});
//$("div.assessmentMainDiv").css(["top","1px", "left","0", 'right':'0','bottom':'0', 'overflow':'auto']);
$("div.assessmentMainDiv").css({
'top' : '1px',
'left' : '0',
'right' : '0',
'bottom' : '0',
'overflow' : 'auto'
});
});
Below code also I have tried
$('#techAssmnt').on('shown.bs.collapse', function (e) {
//alert("sasdas")
var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;
if ( currentScrollbarPosition > topOfPanelContent - panelHeadingHeight) {
$("#Section_1").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}
});
https://www.bootply.com/8bGdJgkmUv
please check this.. In the first panel there is huge content and also scrollable.. Once I open and scroll the content then I close/hide/toggle the panel but content is not all reset to top
You just need to add this jquery
$(".collapse").on('hide.bs.collapse', function(){
$(this).children().scrollTop(0);
});
Working Snippet
i'm currently trying to sort out a problem with the following script. When you hover over a certain area it should make the div appear pretty much instantly, then when you leave that area it should disappear after a set amount of time.
This all works like a charm but the problem is if you leave the browser page frame with the mouse after hovering over it, it bodges up and the div wont appear when you hover over it anymore.
Any help would be greatly appreciated, thank you
$('.loginHider').mouseenter(function(){
$('.loginBar').stop(true, true).animate({marginTop: '0px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '20px'}, 150);
}).mouseleave(function(){
setTimeout(function() {
$('.loginBar').stop(true, true).animate({marginTop: '-50px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '-30px'}, 150);
}, 1200);
});
~Matt
Try
$('.loginHider').mouseenter(function () {
//clear the existing timer
clearTimeout($(this).data('mouseTimer'))
$('.loginBar').stop(true, true).animate({
marginTop: '0px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '20px'
}, 150);
}).mouseleave(function () {
var timer = setTimeout(function () {
$('.loginBar').stop(true, true).animate({
marginTop: '-50px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '-30px'
}, 150);
}, 1200);
$(this).data('mouseTimer', timer);
});
I used the following javascript:
$('.slide-content #show-effect-1').hover(function(){
$(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
$(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});
What should happen is:
mouseenter the button --> content show
mouseout the button --> content hide
Question: when mouseout on the button is faster than the effect time of mouseenter, the content will be hidden and not displayed when mousenter the button again.
How do I prevent this happening?
Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation:
$(document).ready(function () {
var _duration = 1000;
$('#show-effect-1').hover(function () {
var $next = $('.text-banner');
$next.show();
$next.stop(true, true).css({
'margin-left': $next.outerWidth() * -1,
'margin-top': 0,
'opacity': 0,
'display': 'block'
}).animate({
'margin-left': 0,
'opacity': 1
}, _duration);
}, function () {
var $next = $('.text-banner');
$next.stop(true, true).animate({
'margin-top': $next.height() * -1,
'opacity': 0
}, _duration, function () {
$(this).hide();
});
});
});
Check the Updated fiddle
Note that I had to add a container to accurately reproduce the slide effect, you can test without it and see if it's something you actually need
How would i add jQuery's UI Bounce feature to this script? The script currently slides out a progress bar to a set position. I would like that when it reaches the position it bounces back and forth a few times and then rests.
I tried a few previous stack overflow answers but none of them work.
$(function () {
$(".meter .bar").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 900);
});
});
Try the following. It uses an object after the CSS mods in animate() to set the properties.
You can use bounce just change the direction in options.
$(function () {
$(".meter .bar").each(function () {
$(this).data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 700)
.effect('bounce', {times: 3,
direction: "right",
distance: 10}
, 700);
});
});
Demo: jsFiddle
It is a hack, check whether it is acceptable.
Because in order to use the bounce animation we need to call show on a hidden item, check whether the blinking effect is acceptable, then you can use it.
Try using the animate callback
$(function() {
$(".meter .bar").each(function() {
$(this).data("origWidth", $(this).width()).width(0)
.animate({
width : $(this).data("origWidth")
}, 900, function(){
$(this).effect("bounce", {
times:3,
direction: 'right'
});
});
});
});
Demo: Plunker
Demo: Effect
I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.
try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/
Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.
Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});