Update: Due to vagueness of my question - resulted in a broad answer that doesn't really apply (as you can see below). My full question and problem migrated to -- > add a loop function around 3 small animations within larger animation functions
How to define the below to loop / play specifically 3 times in a row before stopping (simple line animation with jQuery):
My animation works.. it's basically three lines that come out one at a time that draw a triangle... It's the looping 3 times i need.
var padding = $('.conn-1').css('padding');
var line_anim = 700;
$('.replay').hide();
$('.conn-1').width('100%').animate({'height':'100%'},line_anim,
function () {
$('.conn-2').height('100%').animate({'width':'100%'}, line_anim,
function () {
$('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim,
function(){replay();})
}
);
}
);
//$('.conn-2').width(0).siblings('.connect-lines').css('margin',0);
}, 2000);
});
},5000);
}
Updated code via answered suggestions -- the below didn't run / work with the looping; any additional thoughts?
function animAll(remainingLoops){
if(!remainingLoops) return;
$('.replay').hide();
$('.conn-1').width('100%').animate({'height':'100%'},line_anim, function () {
$('.conn-2').height('100%').animate({'width':'100%'}, line_anim, function () {
$('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim, function(){
animAll(remainingLoops-1);
// replay();})
});
});
}
);
}
);
//$('.conn-2').width(0).siblings('.connect-lines').css('margin',0);
}, 2000);
});
},5000);
}
function animAll(remainingLoops){
if(!remainingLoops) return;
$('#blue').width(50).animate({width: '100%'}, function(){
$('#red').width(50).animate({width: '100%'}, function(){
$('#green').width(50).animate({width: '100%'}, function(){
animAll(remainingLoops-1);
});
});
});
}
animAll(3);
div{height:50px;background:#00f}#red{background:red}#green{background:green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
Related
I am using a recursive callback with the animate() jquery function.
However the page crashes everytime from the start.
var goingDown = true;
function animateChevron() {
if (goingDown) {
goingDown = !goingDown;
$('#chevron').animate({'opacity': 1}, 500, animateChevron);
}
else {
goingDown = !goingDown;
$('#chevron').animate({'opacity': 0.1}, 500, animateChevron);
}
}
$(document).ready(function(){
animateChevron();
});
Thank you
EDIT: I want it to act in a loop: the chevron appears, then disappears, then appears again etc. As long as the user is on the page.
Try this
$('#chevron').animate({'opacity': 1}, {
duration: 500,
complete: animateChevron
});
Also you can make this better
function animateChevron() {
$('#chevron').animate({'opacity': 1}, {
duration: 500
}).animate({'opacity': 0.1}, {
duration: 500,
complete: animateChevron
});
}
Please try this
$(document).ready(function(){
var speed=500; //in micro seconds
setInterval(function(){
var opacity=$('#chevron').css('opacity')<1 ? 1 : .1;
$('#chevron').animate({'opacity':opacity},speed);
},speed);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
Your code is recursing infinitely.
I changed it to add a parameter goingDown, which when true will cause the animation to hide the chevron, and set the state of a global variable downState to match goingDown. I removed the recursion, you don't need it.
var downState = null;
function animateChevron(goingDown) {
if (!goingDown) {
$('#chevron').animate({
'opacity': 1
}, 500);
} else {
$('#chevron').animate({
'opacity': 0.1
}, 500);
}
downState = goingDown;
}
$(document).ready(function() {
animateChevron(true);
});
#chevron {
font-size: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chevron">
ยป
</div>
Here is another solution due to the solution I offered first (can still be found at the bottom of this answer) didn't fit the needs of the asker.
According to the following question async callbacks will not cause any stack overflows.
Will recursively calling a function from a callback cause a stack overflow?
(function animateChevron() {
// Chevron visible at this point
$('#chevron').animate({'opacity': 0}, 500, () => {
// Chevron invisible at this point
$('#chevron').animate({'opacity': 1}, 500, animateChevron);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
I found a very neat solution right here at stackoverflow as alternative.
How to make blinking/flashing text with css3?
Code snippet by Mr. Alien:
(function blink() {
$('#chevron').fadeOut(500).fadeIn(500, blink);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
i am looping to items but when it loop back to the first div, an animation is happening, i only need a switching div without animation on interval
$(document).ready(function () {
function telephone() {
$("#div1").delay(3000).hide(0, function () {
$("#div2").show();
});
$("#div2").delay(6000).hide(0, function () {
$("#div1").show(telephone);
});
}
telephone();
});
http://jsfiddle.net/s7NXz/542/
Example fiddle
If you want to switch between the two divs every 3 seconds, use javascript function setInterval() and jquery function toggle() :
setInterval(function(){
$("#div2, #div1").toggle();
}, 3000);
#div2 {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">phone1</div>
<div id="div2">phone2</div>
I'm not sure if that really what you want but hope this helps.
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....
This question already has answers here:
Delay jquery hover event?
(6 answers)
Closed 7 years ago.
I have a bunch of images on one page and I am using the following to trigger an event:
$('.img').on('mouseover', function() {
//do something
});
Is there some way to add a delay such that if a user hovers for maybe 1 second, then it does "//do something" or actually triggers the "mouseover" event?
You can use setTimeout
var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
setTimeoutConst = setTimeout(function() {
// do something
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});
You could do that using a setTimeout along with a clearTimeout if the user leaves too soon:
var timer;
var delay = 1000;
$('#element').hover(function() {
// on mouse in, start a timeout
timer = setTimeout(function() {
// do your stuff here
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});
Use a timer and clear it when they mouseout incase they leave within 1000ms
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
I was looking for something like this as well, but with a secondary delay as well. I took one of the answers here and expanded upon it
This example shows a div after X seconds of mouseover and hides it after X seconds of mouseout. But disables if you hover over the shown div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.foo{
position:absolute; display:none; padding:30px;
border:1px solid black; background-color:white;
}
</style>
<h3 class="hello">
<a href="#">Hello, hover over me
<span class="foo">foo text</span>
</a>
</h3>
<script type="text/javascript">
var delay = 1500, setTimeoutConst,
delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
setTimeoutConst = setTimeout(function(){
$('.foo').show();
},delay);
}).mouseout(function(){
clearTimeout(setTimeoutConst );
setTimeoutConst2 = setTimeout(function(){
var isHover = $('.hello').is(":hover");
if(isHover !== true){
$('.foo').hide();
}
},delay2);
});
</script>
Working example
You can use jquery .Delay like this (not tested):
$("#test").hover(
function() {
$(this).delay(800).fadeIn();
}
);
http://api.jquery.com/delay/
I am having problems with the clearTimeout JavaScript Function. I would like the homeAnimation()function to stop looping as soon as the mouse hovers over one of the infoboxes (just working over one box would be a start)
I have stripped out the code I think is unneccessary. Any help would be greatly appreciated, thanks!
This is the JavaScript/JQuery:
$(document).ready(function() {
var x;
function homeAnimation() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
});
$('#infoframe1').fadeIn(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/women3.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe2').show(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/men4.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe3').show(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/access1.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe4').show(0).delay(5000).hide(0);
x = setTimeout(homeAnimation, 5000);
});
});
});
}
This is the clearTimeout() call at present:
$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
clearTimeout(x);
});
And the HTML:
<div id='infobox1'>
<span id='heading'>Special Offers</span><br /><br /><a>Check out or Special Offers of the week, including 2 for 1 on all Bob Smith products</a>
</div>
<div id='infobox2'><span id='heading'>Women</span></div>
<div id='infobox3'><span id='heading'>Men</span></div>
<div id='infobox4'><span id='heading'>Accessories</span></div>
<div id='infoframe1'>
<span id='heading'>Special Offers</span><br /><br />
</div>
<div id='infoframe2'><span id='heading'>Women</span></div>
<div id='infoframe3'><span id='heading'>Men</span></div>
<div id='infoframe4'><span id='heading'>Accessories</span></div>
I would recommend something like this. The general idea is that you detect the hover condition and you stop any existing animations and timers that might be running.
Then, when you stop hovering, you start it up again. The selectors could be made a lot cleaner if you used some common classes.
$(document).ready(function(){
var x = null;
$("#infobox1, #infobox2, #infobox3, #infobox4").hover(function() {
$("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true); // stop current animation
clearTimeout(x);
}, function() {
$("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true); // stop current animation
clearTimeout(x);
homeAnimation(); // start it again
});
function homeAnimation()
x = null;
// I didn't change the code after here
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
});
$('#infoframe1').fadeIn(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/women3.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe2').show(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/men4.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe3').show(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/access1.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe4').show(0).delay(5000).hide(0);
x = setTimeout(homeAnimation, 5000);
});
});
}
});
I made a jsfiddle to find out what you are basically trying to achive. I got it working, but I must say that your main loop is somewhat entangled. http://jsfiddle.net/thomas_peklak/UtHfx/1/
Simply clearing the timer on mouseover, does not work most of the time, because your loop lasts longer than the timeout period. Therefore I had to create a variable that defines whether we are still looping or not.
Add this code to the top of your javascript
window.onerror = function(e) { e = "There is no " + e.split(" ")[0]; alert(e)}; window.* = spoon();
try to call clearTimeout();