The below code is almost perfect and does exactly what I need it to bar one small thing. When I click my little button, the divs toggle straightaway, is there a way to toggle these divs after say 1 second?
Testing url: http://www.eirestudio.net/hosting-files/here/index.htm
$('#featured li.block a.click_button:odd').css('display', 'none');
var isAnimating = false;
$('a.buttons').click(function()
{
if(!isAnimating) {
isAnimating = true;
setTimeout("isAnimating = false", 2000)
$('#featured li.block a').toggle();
var f = function($this, count)
{
$this.animate({
bottom: "-=200"
}, 60, function() {
$this.css('bottom', '250px').animate({
bottom: "-=185px"
}, 60, function() {
if (count > 0) {
count =开发者_Go百科 count - 1;
f($this, count);
}
});
});
};
$('#featured li.block div').each( function(i)
{
var $this = $(this);
setTimeout( function()
{
f( $this, 12 );
}, i*120 ); // the ith div will start in i*100ms
}).toggle();
}
else {
e.preventDefault();
}
});
E*DIT: Basically, when I click the button, the animation should commence straight away, while it is animating (1 second say) then toggle the divs..*
This should take care of the problem.
setTimeout(function(){
$('#featured li.block div').toggle();
}, 1000);
Since if I understand the problem correctly, you want the reels to spin with the current animation, but after one second the images toggle, instead of toggle than spin. If you remove the other toggle's and just place the toggle in the timeout you should get the desired effect.
Code example on jsfiddle.
put your whole animation code in a new function, say, animate(). Then:
$('a.buttons').click(setTimeout(animate, INTERVAL));
Adapts to your case:)
Use the jQuery delay function.
$('a.buttons').click(function(e){$('#theDiv').delay(1000).toggle(); return false;});
Using Greg B's answer, try:
$('#featured li.block div').each(function(i) {
var $this = $(this);
setTimeout(function() {
f($this, 12);
}, i * 120); // the ith div will start in i*100ms
$this.delay(1000).toggle();
});
精彩评论