Search code examples
jquerytoggledelay

Toggle divs after 1 second instead of right away using JQuery?


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 = 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..*


Solution

  • 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.