jQuery animate running a lot of times - javascript

I'm having problems with my animate function. I want it to just run 1 time, but it doesn't. I've tried to debug it with using .stop(); but that didn't work either, so right now I have no idea how to solve this.
The JavaScript:
$(".box").hide();
$(".box").contents().not(".progress").hide();
$(".box").first().show(150, function showNext () {
var next = $(this).next(".box");
if (next.length > 0) {
next.show(150, showNext);
} else {
$(".box").contents().not(".progress").fadeIn(800, function () {
$(".progress").animate({
width: 'toggle'
}, 800);
});
}
});
The problem is easier to see at this jsfiddle:
http://jsfiddle.net/etBLj/
How do I solve this?
Thanks in advance!

The issue is that when you call $(".progress").animate(), the animation gets executed on every element with the "progress" class for the whole document. Since showNext() is called recursively, you end up with multiple animations for each matching element.
All you need to do is to restrict the call to animate to be applicable to the current element in your recursive loop. So change to $(this).next().animate and it will work.
Fiddle: http://jsfiddle.net/etBLj/1/
Additionally I think the JavaScript would become easier to understand if you separated the "showing of the headers" from the "animating of the progress bars", and replaced the recursive function with a simple each loop. For example: http://jsfiddle.net/etBLj/2/

Related

.delay() a .css() action by multiplying an index number

I am trying to create a script that does the following:
Waits until a point on the page is reached by scrolling (.clients with an offset of 500px
Start fading in img's contained inside the .clients div once this event is triggered
Fade in with a slight delay between each item (so they fade in in sequence)
Due to other parts of my code the fade-in has to be with change of opacity:1 and cannot be .fadeIn()
I'm somewhere there but having a few issues. Here is my code:
var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset-500 ) {
$('.home .clients img').each(function(index){
console.log(index);
$(this).delay(500 * index).css('opacity','1');
});
}
});
First problem
The event does fire at the correct scroll-point in the page, but it continues to fire. I would like it to only fire once and then not register again. When 500 above .clients is reached, the event should fire, and never again.
Second problem
My .each() does not seem to work correctly. Everything fades in at once. My method for making a small .delay() between the fade-ins doesn't seem to be working. I tried multiplying the index by 500. So the first index is 0, so it fires immediately. The second index is 1 so it should fire after 500 milliseconds and so on. I'd like to work out why this method isn't working.
Any help appreciated. I'd appreciate trying to make the code above work rather than writing something entirely new, unless that's the only way. I'd appreciate explanation of what I was doing wrong so I can learn, instead of just pure-code answers.
JSFiddle
Sidney has attacked most of the problems except one. The scroll event fires multiple times, so it checks the conditional multiple times and then actually sets the animation multiple times. To keep this from happening, I typically like to add another boolean to check if the process has fired at all. I've simplified the code to make the changes more legible.
var working = false;
$(window).on('scroll', function(){
if($(window).scrollTop() > 1000 && !working){
working = true;
setTimeout(function(){
working = false;
}, 500);
};
});
As Tushar mentioned in the comments below your post, instead of using .delay() you could use a plain setTimeout().
On the jQuery docs for .delay() they mention that using setTimeout is actually better in some use-cases too - this is one of them.
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Using setTimeout your code would look like this:
var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function() {
if ($w.scrollTop() > targetOffset - 500) {
$('.home .clients img').each(function(index) {
setTimeout(function() {
$(this).css('opacity','1');
}, (500 * index));
});
}
});
Also, you can unbind an event using .off()
so in your if ($w.scrollTop() > targetOffset - 500) { ... }
you could add a line that looks like this:
$(window).off('scroll');
Which would unbind the scroll handler from the window object.
You could also use .on() to reattach it again some time later. (with on() you can bind multiple events in one go, allowing you to write the same code for multiple handlers once.)
Please change your jquery code with following it will trigger event one time only and may be as per your reuirements :-
var targetOffset = $(".clients").offset().top;
var $w = $(window).scroll(function () {
if ($w.scrollTop() == 1300) {
console.log('here!');
$('.clients img').each(function (index) {
$(this).delay(5000 * index).css('opacity', '1');
});
}
});
Here i have take scroll hight to 1300 to show your opacity effect you can take it dynamically, if you want it 500 then please change the css as following also.
.scroll {
height:700px;
}

Why isn't my jQuery looped animation working?

I am trying to loop a jQuery animation along with the jQuery UI 'explode' effect infinitely until an event stops it. Here is my code:
function movingPicture() {
$('img').delay(2800).animate({right: '44%'}, 3000, movingPicture).effect('explode');
$('img').css('right', '-100px');
$('img').show();
};
movingPicture();
This is supposed to have it loop infinitely according to some research I have done. An img would move left into view onto the document, explode, and then be reset back to the original position. Then, I would like it to perform the same animation infinitely until stopped. What am I doing wrong? Also, what is a way I could stop the loop when an event occurs, like a button is clicked. I am a beginner by the way, so try to keep it as simple as possible. Thanks!
You'd do that like so
function movingPicture() {
$('img').delay(2800).animate({right: '44%'}, 3000, function() {
$(this).effect('explode', function() {
$(this).css('right', '-100px').show();
movingPicture();
});
});
}
movingPicture();
FIDDLE

Fast clicks cause the slide view to work incorrectly?

Here is the working demo.
http://jsfiddle.net/Evqqp/1/
Please check the demo to easily understand the issue. Click on the arrows fast and you will see the view mess up.
I understand it might be because of the 300ms animation i do. What is a clean way to handle the clicks such that it does not mess up the view. I can use a flag to check if the previous click action is complete. But i wanted to seek opinions if there is a better way to do this.
Code where i do the animate
$(".rightArrow").on("click", function () {
if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
$(".slideBox").animate({
"margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
}, 300, checkRightArrow);
$(".leftArrow").show();
} else {
$(".rightArrow").hide();
}
});
Thank you
Check if your element is currently animated with the following
if(!$('#myElement').is(':animated'))
{
// Do your animation here
}
Try .stop(true,true)
$(".slideBox").stop(true,true).animate({
Whenever working with animations you should always stop() the previous animation on the element before animating it again.
$(".slideBox").stop(true, true).animate(...
http://jsfiddle.net/Evqqp/4/
You need to add
event.stopPropagation();
after:
$(".rightArrow").on("click", function () {
so:
$(".rightArrow").on("click", function () {
event.stopPropagation();
...

Checking for visibility of a toggled element

I have a button which toggles the visibility of a <div> below it and want to modify the text on the button depending on the visibility of said <div>.
Here is a live demo on jsFiddle
If you click on "Saved Data", the first time it works correctly, but the next time you click the text does not change. This in itself is behaviour that I don't understand.
Now, I could use multiple handlers for slideToggle(), however, elsewhere in the code I also set intervals which load data next to "Cookie data:" and "Server data:". I don't want these intervals to do anything if the <div> is not visible so I use something like this:
this.timer_cookiedata = setInterval(function(){
if (!$savedData.is(':visible'))
{
return null;
}
// ..
});
I'm worried these intervals are not going to work properly because of this is(':visible') business. So the question is, why does this happen (else statement is ignored), and what can I do to mitigate this?
Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:
$(function () {
var $savedData = $('#savedData');
$('#btn-savedData')
.click(function () {
var $button = jQuery(this);
//I'm checking the visibility in the callback. Inside the callback,
//I can be sure that the animation has completed and the visibility
//has been updated.
$savedData.slideToggle('fast', function () {
if ($savedData.is(':visible')) {
$button.html('visible');
} else {
$button.html('not visible');
}
});
});
});​

slideToggle issue with stop()

$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").slideToggle("normal");
return false;
});
});
With this piece of jQuery code I can make elements slide in and out. But the problem is that when someone clicks real fast, the slide out will only go until the max height is reached of the latest reached height.
So, if someone would click real fast the element will only slide out a couple of pixels and slide back up. If they´d than click again to slide it out, it will only slide out to the max height it reached the last time.
Can anybody help me to fix this issue to make this work proper?
PS: The height of the p element is set to auto so it automaticly matches the height of the content inside (maybe this detail will help with your answer).
Instead of using the click function to attach the click event, use one instead:
$("ul li").one("click", doStuff);
function doStuff(){
// do your stuff here
$("ul li").one("click", doStuff); // Re-attach event
}
and then re-attach the event in the function.
Try this:
$(document).ready(function() {
$("ul li").click(function() {
if ( ! $(this).find('p:animated').length)
{
$(this).find("p").slideToggle("normal");
return false;
}
});
});
If you want to actually process the additional clicks (rather than ignore them), then you want to use .stop(true, true) to stop the previous animation and jump it to the conclusion so your next animation can run as you want:
$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").stop(true, true).slideToggle("normal");
return false;
});
});
Whenever you trigger an animation from a user click, you should know about .stop() and figure out which arguments you want to use with it for a given situation. Without it, the animations can pile up in the queue and run sequentially which is usually not what you want.
Here's the jQuery reference info on .stop() and it's arguments.

Categories