I would like to set the jQuery Isotope shuffle method to to perform an animated shuffle of the loaded DOM elements every 30 seconds that someone is on the page with the plugin loaded.
I have had success tying the animation to a .hover() event, but I cannot seem to get it to fire when I use setInterval() or .queue(). I want the animation to fire regardless of user interaction/input.
var iso_shuffle = function() {
$('#isotope').isotope('shuffle');
}
setInterval(iso_shuffle(), 2500);
Why does the previous code not trigger the randomization, yet this does:
$('#isotope').hover(function() {
iso_shuffle()
});
Cheers
iso_shuffle() calls the function immediately. The function returns nothing. So your setInterval is actually doing the equivalent of:
setInterval(undefined, 2500);
You want to use the function name as the callback for setInterval:
setInterval(iso_shuffle, 2500);
You need to pass the function itself, not its return value:
setInterval(iso_shuffle, 2500);
Related
I have a simple .click() function with some functions in it:
$mario.on('click', this, function() {
var width_mario = $window.width()/2;
$contentw.animate({left: '100%', marginLeft: -width_mario, marginTop: 0}, 600);
$fixed.css({'background-color': '#510000', 'left': '25%'});
createMario();
trigger(); // fire trigger not until createMario() is finished with animation
});
inside the function of createMario() are loads of jQuery .animate()ions. What I intend to do is, to fire trigger not until the animations of createMario()are finished. Something like the return function you can do if an animation is finished BUT inside the click function.
Thanks
edit: and not with setTimeout() because the animations have a random speed.
You can't literally do that. What you need to do instead is pass a reference to the trigger function into createMario and have it call that function when the animations are finished. Assuming the animations are via jQuery, they have a callback they call when they're done.
pass it as a callback, something like this:
function createMario(calback_fn) {
...
animate({...}, {duration: 12345, complete: callback_fn});
...
}
Make sure you add it to the longest animate call.
Note that may need to slightly change the animate syntax, see http://api.jquery.com/animate/ for different argument options).
Then do:
...
$fixed.css({'background-color': ... as before... });
createMario(trigger);
You can also use element.promise.done(function() { trigger(); }); if you're animating 1 element in the createMario function, or you can attach it to the longest animated element also (the one that takes the longest to finish), and it will call the trigger() function after that element has finished animating.
Here's a jsFiddle I put together that exemplifies this: http://jsfiddle.net/WPHmY/2/
I'm building a custom slider on Javascript , and I want that every time the user clicks on a div of the slider, the slider should stop for X seconds.
My code is:
$(document).ready(function () {
var ciclo;
var index_slide = 1;
function startSlidercicle() {
ciclo = setInterval( function() {
// Slider code goes here
}, 3000);
}
//Here I start the slider animation
startSlidercicle();
//When the user clicks on a div called 'slide', stop the cycle and start again the animation cycle
$('.slide').on('click', function() {
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
});
});
But the problem is that everytime I click and stop the slider, the cycle starts faster and faster. How can I fix it?
Instead of:
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
or:
clearInterval(ciclo);
setTimeout(startSlidercicle, 3000);
I changed the code to be:
clearInterval(ciclo);
startSlidercicle();
And now the slider just works fine. I think that, in the first two proposals, every time I click on the div, a new function is created, "overlapping" over the existing cycle and, thus, it looks like the slider speeds up, but its just one cycle starting over another.
You need to change this:
clearInterval(ciclo);
setTimeout(startSlidercicle(), 3000);
to this:
clearInterval(ciclo);
setTimeout(startSlidercicle, 3000);
In your existing code, you are calling startSlidercirle immediately and it is not waiting until the setTimeout() fires because you have the () after the function name. That means to execute it immediately and pass the result of executing that to setTimeout(). You want to just pass the function reference to setTimeout() which is done by just having the name of the function with no () after it. This is a common mistake.
I create this function for show div with function call , but i nedd execute this function and stop in one second after show :
<script>
function repit_clouds(request)
{
if (request=='no')
{
stop();
}
else
{
if (request=='ok')
{
var interval = setInterval(function() {
$("#header_sun").fadeIn(4000);
$("#header_sun").fadeOut(4000);
},10000);
}
}
}
$(document).ready(function()
{
$("#header_sun").fadeIn(4000).delay(4000).fadeOut(4000);
repit_clouds('ok');
$("#header_background_clouds").fadeOut(2000).css("display","#none");
$("#header_background_night").fadeIn(2000).css("background","#000").show(4000).fadeIn(2500);
repit_clouds('no');
});
</script>
The problem it´s with repit_clouds function , when i send the value no the function must stop , but no works fine and continue as if the request==ok , i don´t know why no stop
umm, what exactly do you think stop() does? Did you perhaps mean:
$('#header_sun').stop()
which would pause any existing animations on that element?
Or did you perhaps also want to stop the interval timer:
clearInterval(interval);
which of course also requires that interval be declared outside of the function so that its value isn't lost each time you call the function.
I note also that your .css() functions won't be queued by the .fadeOut() or .show() calls - .css() isn't an animation function so those changes will always happen immediately.
Likewise the two calls to repit_clouds() won't be queued either - if you expect those to be done after the previous animations then you need to investigate the jQuery .queue() function, or trigger them during "animation complete callbacks".
I think the issue is relative with queue in Jquery.
We can use clearQueue() to clear queue to stop any animate, however the clear queue cannot stop the call back function
consider this
$("#sth").animate( { width:'100%' }, 2000, function() {
$("#sth").css("width","0%");
});
and
$("#sth").clearQueue().css("width","0%");
is able to stop the animate and push back the width. However, after 2000 miliseconds, it will also turn to 100% width, because of the complete call back function. the function will invoke after 2000 miliseconds no matter whether the queue exists.
From jQuery documentation:
.clearQueue()
Remove from the queue all items that have not yet been run.
and
.stop()
Stop the currently-running animation on the matched elements.
Try use .stop() instead .clearQueue().
calling stop function will stop the animation that was attached on sth obj
function stopSthAnim(){
$('#sth#).stop();
}
you can also use complete callback function
$("#sth").animate( { width:'100%' }, {
duration:2000,
complete: function(){
$('#sth#).stop();
}
}, function() {
$("#sth").css("width","0%");
});
I have a popup that is executed on mouseover with jquery.
Within that function I have a second delay before the popup displays using settimeout
Problem is if in that second they mouse over multiple times then multiple popups are triggered.
$('#div').mouseover(function() {setTimeout("popup()",1000);});
What I need to do is disable the detection and then re enable it in popup().
How might I do that?
You can use .hover() with a clearTimeout(), like this:
$('#div').hover(function() {
$.data(this, 'timer', setTimeout(popup, 1000));
}, function() {
clearTimeout($.data(this, 'timer'));
});
This clears the timeout you're setting if the mouse leaves, you'll have to stay on the element for a full second for the popup to trigger. We're just using $.data() on the element to store the timer ID (so we know what to clear). The other change is to not pass a string to setTimeout() but rather a reference directly to the function.
I guess something like this
(function(){
var popup_timer = 0;
$('#div').mouseover(function() {
clearTimeout(popup_timer);
popup_timer = setTimeout("popup()",1000);
});
});
EDIT updated code, clearTimeout added, wrapped