Переключать div через 1 секунду вместо использования JQuery? - PullRequest
0 голосов
/ 22 марта 2011

Код ниже почти идеален и делает именно то, что мне нужно, чтобы исключить одну маленькую вещь. Когда я нажимаю свою маленькую кнопку, div переключается сразу, есть ли способ переключить эти div после, скажем, 1 секунды?

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: в основном, когда я нажимаю кнопку, анимация должна начинаться сразу, пока она анимируется (скажем, 1 секунда), а затем переключает div. *

Ответы [ 4 ]

1 голос
/ 22 марта 2011

Это должно решить проблему.

    setTimeout(function(){
        $('#featured li.block div').toggle();
    }, 1000);   

Поскольку, если я правильно понимаю проблему, вы хотите, чтобы барабаны вращались с текущей анимацией, но через одну секунду изображения переключались, а не переключалисьчем вращаться.Если вы уберете другой тумблер и просто поместите тумблер в таймаут, вы получите желаемый эффект.

Пример кода на jsfiddle .

1 голос
/ 22 марта 2011

Используйте функцию задержки jQuery .

$('a.buttons').click(function(e){$('#theDiv').delay(1000).toggle(); return false;});
1 голос
/ 22 марта 2011

Используя ответ Грега Б., попробуйте:

$('#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();
});
1 голос
/ 22 марта 2011

поместите весь код анимации в новую функцию, скажем, animate (). Тогда:

$('a.buttons').click(setTimeout(animate, INTERVAL));

Адаптируется к вашему случаю:)

...