Search jQuery

jQuery Forum

Why does this animate callback function loop 33 times?

in Using jQuery • 10 years ago

This callback has a counter, and i can see that the counter goes to 33, and quite slowly at that. Takes about 11 seconds to loop 33 times, and the other animations won't go until it stops.

Any idea as to why this is happening?

var counter1= 0;
$("#StartUpPosition div").not("#StartUpMainNode").fadeOut(300, function() {
$("#StartUpMainNode").animate( {left:22}, function() { //animate the center node to the left
counter1++;
$("#NodeMain").fadeIn(200);
console.log(counter1);
});
});

Replies(6)

alano999

Re: Why does this animate callback function loop 33 times?

10 years ago

Please will you share the html and css relating to the elements you are selecting and animating. It's difficult to understand the context without this info.

It works fine for me if I create several div's in a structure that seems logical to me. It's very probably going to be due to the way in which you have structured your html (and possibly css).

sabinmash

Re: Why does this animate callback function loop 33 times?

10 years ago

Sure! Here's all the relevant CSS I could think of:

#StartUpPosition {
position:absolute;
height:500px;
width:590px;
}
#StartUpPosition .clsStartUpNode {
position:absolute;
width:100px;
height:100px;
background:url(images/red-node.png) no-repeat;
text-align:center;
text-transform:Capitalize;
overflow:hidden;
}
#StartUpPosition #StartUpMainNode {
top:145px;
left:250px;
display:none;
}
#StartUpPosition #StartUpPosition1 {
top:40px;
left:188px;
display:none;
}
#StartUpPosition #StartUpPosition2 {
top:38px;
left:310px;
display:none;
}
#StartUpPosition #StartUpPosition3 {
top:145px;
left:374px;
display:none;
}
#StartUpPosition #StartUpPosition4 {
top:250px;
left:315px;
display:none;
}
#StartUpPosition #StartUpPosition5 {
top:253px;
left:190px;
display:none;
}
#StartUpPosition #StartUpPosition6 {
top:145px;
left:128px;
display:none;
}
#StartUpPosition div.clsStartUpNode:hover,#CircleNodes div.clsNode:hover {
background:url(images/red-node-highlight.png) no-repeat;
}
#NodeMain {
left:22px;
}

HTML:

<div id="StartUpPosition">
<div class="clsStartUpNode" id="StartUpMainNode" nodeid="" nodelayer="" nodetitle="" ></div>
<div class="clsStartUpConnector" id="StartUpConnector1" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpNode" id="StartUpPosition1" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpConnector" id="StartUpConnector2" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpNode" id="StartUpPosition2" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpConnector" id="StartUpConnector3" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpNode" id="StartUpPosition3" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpConnector" id="StartUpConnector4" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpNode" id="StartUpPosition4" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpConnector" id="StartUpConnector5" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpNode" id="StartUpPosition5" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpConnector" id="StartUpConnector6" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsStartUpNode" id="StartUpPosition6" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
</div>
<div class="clsBreadcrumb" id="NodeMain" nodeid="" nodelayer="1" nodetitle="" ></div>
<div class="clsBreadcrumb" id="NodeTwo" nodeid="" nodelayer="2" nodetitle="" ></div>
<div class="clsBreadcrumb" id="NodeThree" nodeid="" nodelayer="3" nodetitle="" ></div>
<div id="CircleNodes">
<div id="SubNodePrevious" onclick="$.showPrevNode();PlaySound();" alt="View previous" title="View previous">
Previous
</div>
<div class="clsNodeConnector" id="SubNodeConnector1" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNode" id="SubNode1" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNodeConnector" id="SubNodeConnector2" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNode" id="SubNode2" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNodeConnector" id="SubNodeConnector3" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNode" id="SubNode3" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNodeConnector" id="SubNodeConnector4" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNode" id="SubNode4" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNodeConnector" id="SubNodeConnector5" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div class="clsNode" id="SubNode5" nodeid="" nodelayer="" nodetitle="" onclick="javascript:PlaySound();"></div>
<div id="SubNodeNext" onclick="$.showNextNode();PlaySound();" alt="View next" title="View next">
next
</div>
</div>

Kevin B

Re: Why does this animate callback function loop 33 times?

10 years ago

The callback is being fired once for every element you animate. Try using the promise callback instead.

for example,

$(elementcollection).fadeOut(300).promise().done(function(){

// all elements are done animating, do something else

});

-- Kevin

sabinmash

Re: Why does this animate callback function loop 33 times?

10 years ago

Oh I see, I didn't know that about callbacks. It loops once for every element that was int he selected group. Why doesn't it just do the whole group at the same time? Is there a way to do that?

Kevin B