I have a mouseenter animation on a footer and also a mouse leave animation that just slides it abit, the issue im having is if you mouse enter then mouseleave multiple times quickly the animations que and run over and over even if the element is no longer beign used.
How do I wait for the mouse over to run before it then recognises the mouse leave please.
Many thansk for any help
David
$(document).ready(function () {
$("footer").mouseenter(function () {
$("footer").animate({ bottom: '+=62px' }, 500);
});
$("footer").mouseleave(function () {
$("footer").animate({ bottom: '-=62px' }, 500);
});
});
Try adding stop() to your animate functions. It stops the currently-running animation on the selected element.
$("footer").mouseenter(function () {
$("footer").stop().animate({ bottom: '+=62px' }, 500);
});
$("footer").mouseleave(function () {
$("footer").stop().animate({ bottom: '-=62px' }, 500);
});
Related
I am making a game like freaking-math using Phonegap and javascript.
I need to create similar timebar at the top. I use jQuery animate to animate the bar ... it works with the first answer only well .. then the second answer it starts but not exactly when the button is fired ..
how can I make it start just when the button fired and end too when it's fired again and end also after 3000ms if no answer were choosen ! ?
(function timeBar() {
$('.answer').on('touchstart', function(){
$('.progress').animate({ width: '0%' }, 3000)
$('.progress').animate({ width: '100%' }, 0);
});
})();
I have tried :
(function timeBar() {
$('.answer').on('touchstart', function(){
$('.progress').animate({ width: '0%' }, 3000);
});
$('.answer').on('touchend', function(){
$('.progress').animate({ width: '100%' }, 0);
});
})();
But not working :( !!
Here's one solution, given that you reload the page for every new math-question:
http://jsfiddle.net/daxro/uLd49zmp/1/
$(document).ready(function() {
$("#bar").animate({
width: '0%'
}, 3000);
});
...and here's another solution which includes a button: http://jsfiddle.net/daxro/uLd49zmp/3/
Below is the Jquery code being used to animate a few images, but i would like to remove the following line from the code
jQuery('.banner_underlay').removeAttr('style');
and then get the animation to replay with every carousel slide. My jquery code below. Can anyone help?
jQuery(document).ready(function () {
jQuery('.cycle-slideshow').cycle({
fx: 'scrollLeft',
after: on_after
});
});
function on_after()
{
jQuery('.banner_underlay').animate({
left: '+=1000',
}, 1050, function () {
jQuery('.banner_underlay').removeAttr('style');
});
jQuery('.banner_overlay').animate({
right: '+=2000',
}, 1050, function () {
jQuery('.banner_overlay').removeAttr('style');
});
}
Trigger/set up an event each time the carousel slides. Set up a listener to call on_after(), or whatever animation you want to restart, every time that event is triggered.
$(document).ready(function() {
$("#slide").delay(5000).animate({right: 0}, 500);
});
#slide {
position: absolute;
right: -155px; overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide"><img src="pic.jpg"></div>
Right now my code is working with a delay of 5 seconds then the photo slides out from the right side. I need to change this so it stays in the "right:-155" position until you hover over the image. Once you hover it should slide out to "0" and hold it there for about 6 seconds. If the user moves the mouse off it should just go back to the original position.
Can anyone help me?
Try:
$(document).ready(function () {
$("#slide").hover(function (e) {
$(this).stop().delay(5000).animate({
right: e.type === "mouseenter" ? 0 : "-155px"
}, 500);
});
});
Or better toggle some class.
Bit late to the game, and I see you already have a "working" answer, however, think this works slightly better:
$('#slide').hover(function () {
$(this).stop( true, true ).animate({right: 0}, 500);
timeout = window.setTimeout(function(){
$('#slide').trigger('mouseleave');
}, 5000);
},function(){
window.clearTimeout(timeout);
$(this).animate({right: -500}, 500);
});
Here it is in action - http://jsfiddle.net/w7ybb/
i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i'm not sure how to do that as i keep getting syntax error in my editor. Here's what i have:
jQuery(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout()
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn't mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of 'setTimeout' that is trigged only if the user doesn't move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!
This line is the problem
$('.slidedown').mouseout()
It shoule be
$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )
You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.
So the correct code would look like this
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
Thanks T.J and Arnab, this works:
$(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
});
});
But the other thing i mentioned about moving the mouse over .trigger but then away (but not into .slidedown) doesn't work. The .slidedown just remains open. :) :( I think it will be very complex to get a .mouseout event that has a kind of 'allow' rule for one destination of the mouse.
I'm using the jQuery .scroll() function to make a certain element fade to 0.2 opacity. Since there is no native "scrollstop" indicator, I decided to make the element fade back to 1.0 opacity on hover. However, it doesn't work.
Here's my code:
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(
function() {
$(this).animate({ opacity: 1 }, 500);
}, function() {
$(this).animate({ opacity: 1 }, 500); // just to be safe?
}
);
});
When I scroll, the #navlist element fades, but when you hover over it nothing happens. But if you refresh the page when you're half way down, the element automatically fades as soon as you refresh, before I've scrolled, and if you try to hover to fade it back in, nothing happens.
Any thoughts?
try to stop animation first
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").stop().animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
},
function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
}
);
The problem is that the scroll event, gets called multiple times during a single scroll (10-20 per a single mouse wheel scroll), so #navlist gets a lot of animate events of 2 seconds.
I am not exactly sure what's going on with jQuery, but when you hover it, even though the opacity: 1 animations run, they end up running the queued #navlist animations.
I solved the problem using a sort of flag, I bet you can find something more efficient.
$(document).ready(function(){
var isAnimationBusy = false;
$(window).scroll(function(){
if(isAnimationBusy) return;
isAnimationBusy = true;
$("#navlist").animate(
{ opacity: 0.2 }, 2000,
function(){ isAnimationBusy = false; }
);
});
$("#navlist").hover(
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
},
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
}
);
});
Edit: The animation stop will solve the problem, I still believe you should control how many times you call the animate event. There could be a performance hit.