<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").each(function() {
var t=$(this);
t.click(function() {
q=0;
function cool() {
++q;
if (q<=10)
$(t).slideUp(500).slideDown(500,cool);
}
cool();
});
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
The code is supposed to slide any paragraph up and down for a total of ten times when any of them are clicked. Because I have included a each loop, I expect that they animate independently, i.e. if I click another para while the previously clicked one is yet to slide up and down 10 times fully, this one will start sliding up and down of its own accord and finish ten times, while the one clicked before also does so and stops of its own accord. However, when I click a para while another one is still in the midst of its animation routine, the two starts sliding up and down alright, but finishes at times which are bizarre and bear no logic. For example, when I click the 3rd para, wait until it has finishes its sliding up-and-down routine twice, I click the 2nd para too. What happens after this is that they start sliding up and down together, the 2nd one does 5 of those routines along-with the 3rd one and stops, while the 3rd one does one more and stops (thus sliding up and down for a total of 8 times). Can anyone explain this anomaly and the specificity of these numbers?

New Topic/Question
Reply



MultiQuote

|