I have some div in my page that when an user drags one of them the div would fade out.It's work but div fadeout after 6 second immediately.
$(function(){
$( ".comment-list.clearfix" ).draggable({axis: "x"},{
start: function() {
$(this).fadeOut(6000);
},
});
});
Use setTimeout() for delay like,
start: function() {
var $this=$(this);
setTimeout(function(){
$this.fadeOut(6000);
},5000); // 5 seconds timeout, for example
}
or use delay() like,
start: function() {
$(this).delay(5000) // 5 seconds delay, for example
.fadeOut(6000);
}
Note: You can change delay interval, as you required.
Related
I have a simple slide down function using jQuery where I'm simply animating an image to slide down. It works great. However I'm trying to reset the animation after it's ran, so it will continue on loop during the duration of the users session. I tried the below, but it didn't work as wanted, slide animation still ran, but not the sought effect of timing out and restarting. Thanks for any thoughts.
$(window).load(function () {
setTimeout(function(){
$("#man").show("slide", {
direction: "up"
}, 2000);
},500);
});
You can call a function after it completes the 2000ms transition.
Updated fiddle: http://jsfiddle.net/CqR9E/392/
$(window).load(function () {
setTimeout( go(),500);
});
function go(){
$("#man").show("slide", {
direction: "up"
}, 2000, function(){
$( "#man:visible" ).removeAttr( "style" ).fadeOut();
go();
});
}
I have a three different transitions for fading out and fading in my 3 images.
animate1 = function() {
$('#changingImage').fadeOut('fast', function() {
$('#changingImage').attr("src","../files/others/image1.jpg");
$('#changingImage').fadeIn('fast');
});
};
I have this same function two more times, just replacing the 1s with 2s and 3s.
I call my three functions with this, repeating every 5 seconds:
animate1().delay(5000);
animate2().delay(10000);
animate3().delay(15000);
I'm new at jQuery, and I don't understand why the timing is wrong. All that happens is image2 (the original) gets replaced with image1, and that's it.
Try using the setTimeout() javascript function.
Documentation: http://www.w3schools.com/jsref/met_win_settimeout.asp
For example:
setTimeout(function(){ animate1(); }, 5000);
setTimeout(function(){ animate2(); }, 5000);
setTimeout(function(){ animate3(); }, 5000);
This basically 'pauses' your JavaScript/jQuery code for 5 seconds before running the function and continuing.
.delay() does not repeat an event, it just delays its execution. You need .setInterval() if you want to repeat an event based on a given interval:
window.setInterval(function(){
setTimeout(animate1, 1000);
setTimeout(animate2, 500);
}, 5000);
Demo: https://jsfiddle.net/erkaner/bfb7jgaL/1/
Yay! I figured it out with a bunch of help.
var animations = function() {
setTimeout(function() {
animate1();
console.log("Animation 1")
}, 5000);
setTimeout(function() {
animate2();
console.log("Animation 2")
}, 10000);
setTimeout(function() {
animate3();
console.log("Animation 3")
}, 15000);
};
setInterval(animations, 15000);
Hi i have a suggestion for you in case that you have more than this 3 image so you will create a new function for it ?
so what about to use only 1 function that will call it self with an attribute that define image name as it is the only thing is changing every time so you can use this better and less code ,you have just the n value will change every time will increase and the max value witch define how many image you want
//if you want to set this animation for more than 3 image just change the max value
var max=3;
setTimeout(function(){ animate(2); }, 5000);
animate = function(n) {
$('#changingImage').fadeOut('fast', function() {
if(n<=max){
$('#changingImage').attr("src","http://www.imacros-scripts-for-free.is-best.net/image"+n+".jpg");
$('#changingImage').fadeIn('fast');
if(n==max){n=1}else{n++;}
setTimeout(function(){ animate(n); }, 5000);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="changingImage" src="http://www.imacros-scripts-for-free.is-best.net/image1.jpg" width="200px">
So im trying to add a delay to a Mouse leave event so it doesnt glitch if one is on the edge of hovering over the element
$(window).load(function(){
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: 75
});
});
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
.delay(10)//Have a delay here
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: -75
});
});
});
Any ideas??
I use this plugin, does a great job on avoiding 'accidental hovers'
http://cherne.net/brian/resources/jquery.hoverIntent.html
On the mouseleave event, you can use setTimeout to delay the execution of a function. Capturing the id returned from the setTimeout function allows you to prevent that function from executing with clearTimeout. So if a user puts their mouse back over the area before the delay finishes, the element won't execute the mouseleave animation.
$(document).ready(function(){
var timeoutID ;
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
// Don't execute the hide function if it hasn't executed
clearTimeout( timeoutID );
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: 75
});
});
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
timeoutID = setTimeout(function(){
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: -75
});
}, 1000) // Delay 1000 milliseconds
});
});
Here is a fiddle: http://jsfiddle.net/t829p/3/
Documentation on the setTimeout and clearTimeout functions:
https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
https://developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout
My question is how can I have #slider to be played always 1 second after #faded. Having it in 4 secs and 5 secs is not a stable way.
$(function(){
$("#faded").faded({
autoplay: 4000
});
});
$(function(){
$("#slider").faded({
autoplay: 5000
});
});
Is this what you want / need? It will fade in the first element after 4 seconds and when that is done, it will trigger a second timer after 1 second:
setTimeout(function() {
$('#faded').fadeIn('normal', function() {
setTimeout(function() {
$('#slider').fadeIn('normal');
}, 1000);
});
}, 4000);
Here is one problem you are facing:
$(function(){... this event happens before the page is render, thus creating inconsistencies in your code.
I would recommend that you change it to window.onload = function (){....
this should fix the problem.
$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
I want the mouseenter function to have a stop() and a delay of 1 second.
So, if I hover over #download the fadeIn should start after a 1 second delay. If I mouse out meanwhile the fadeIn shouldn't start. Get me?
I don't really know how to do that, any ideas?
You need to use setTimeout() in this case because of how .delay() works (and your inability to cancel it).
$('.file a').live('mouseenter', function() {
$.data(this, 'timer', setTimeout(function() {
$('#download').stop(true, true).fadeIn('fast');
}, 1000));
}).live('mouseleave', function() {
clearTimeout($.data(this, 'timer'));
$('#download').stop(true, true).fadeOut('fast');
});
You can give it a try here.
If you use .delay() it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you can cancel, which the above does by manually calling setTimeout() and storing the result with $.data() so you can clear it later, via clearTimeout().
I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()
It would look something like this:
$('.file a').live('mouseenter', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 1000); // one second delay
.animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 'slow', 'swing');
});
Use a setTimeout function
$('.file a').live('mouseenter', function() {
setTimeout(function(){
$('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).
you can use this on jquery without using delay event .
$('.file a').hover(function() {
time = setTimeout(function() {
$('#download').fadeIn();
},1000);
},function(){
clearTimeout(time);
});
1000 is your time that after it $('#download') will fade in .