JQuery помочь с unbind, а затем снова связать после последовательности анимации - PullRequest
Новая
       47

JQuery помочь с unbind, а затем снова связать после последовательности анимации

0 голосов
/ 02 сентября 2011

У меня есть следующая функция js, и я хотел бы предотвратить что-либо происходящее и ставить в очередь, как только произошло событие click.Затем, когда функция завершится, разрешите событию щелчка повториться. 

$("#tweet_activate a").click(function(){    
if($('body').hasClass('home')) {
$(this).parent().stop(true,true).animate({top: "+=154"}, 400).delay(1200).fadeOut();
} else {
$("#int_comp").animate({width: "+=157"}, 100);
$(this).parent().stop(true,true).animate({top: "+=154"}, 400).delay(1200).fadeOut();
}
$("#tweet_text").delay(400).animate({right: "+=56"}, 400);
$("#tweet").delay(900).animate({right: "+=214"}, 400);
$("#tweet_deactivate").delay(1200).fadeIn();
$("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
$("#eye").delay(600).fadeOut();
return false;
});

$("#tweet_deactivate a").click(function(){
if($('body').hasClass('home')) {
} else {
$("#int_comp").animate({width: "-=157"}, 400);
}
$("#tweet_text p, #tweet_text span, #tweet #links").fadeOut();
$("#tweet").stop(true,true).animate({right: "-=214"}, 400);
$("#tweet_text").delay(400).animate({right: "-=56"}, 400);
$(this).parent().delay(900).animate({top: "-=154"}, 400).delay(200).fadeOut()
.delay(600).animate({top: "+=154"}, 100);
$("#tweet_activate").animate({top: "-=154"}, 500).delay(650).fadeIn();
$("#eye").delay(1000).fadeIn();
return false;
});

Сайт находится здесь - http://danielhollandphotography.com/

Если вы нажмете знак «плюс» на правой сетке значковВы увидите, как происходит последовательность.Если вы нажмете на иконку посередине, вы снова увидите огонь.

Спасибо, Мэтт

1 Ответ

1 голос
/ 02 сентября 2011

Просто добавьте небольшую проверку к элементу. Как только вы запустите анимацию, установите bool в true, при нажатии сделайте вашу первую проверку 

var animating = false;
$("#tweet_activate a").click(function() {
    if (animating !== true) {
        animating = true;
        if ($('body').hasClass('home')) {
            $(this).parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        } else {
            $("#int_comp").animate({
                width: "+=157"
            }, 100);
            $(this).parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        }
        $("#tweet_text").delay(400).animate({
            right: "+=56"
        }, 400);
        $("#tweet").delay(900).animate({
            right: "+=214"
        }, 400);
        $("#tweet_deactivate").delay(1200).fadeIn();
        $("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
        $("#eye").delay(600).fadeOut(function() {
            animating = false; // this is a guess. but place this where ever the animation is stopping. 
        });
    }
    return false;
});

Это должно работать. Попробуйте. 

$("#tweet_activate a").click(function() {
    $this = $(this);
    if ($this.attr("is-animated") !== "true") {
        $this.attr("is-animated", "true");
        if ($('body').hasClass('home')) {
            $this.parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        } else {
            $("#int_comp").animate({
                width: "+=157"
            }, 100);
            $this.parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        }
        $("#tweet_text").delay(400).animate({
            right: "+=56"
        }, 400);
        $("#tweet").delay(900).animate({
            right: "+=214"
        }, 400);
        $("#tweet_deactivate").delay(1200).fadeIn();
        $("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
        $("#eye").delay(600).fadeOut(function() {
            $this.attr("is-animated", "false");
        });
    }
    return false;
});

вы можете видеть, что ключ является атрибутом ("is-animated"); Я не могу выполнить проверку в главной кнопке, потому что она уже определила событие click до того, как я применил атрибут. Странный. О, хорошо, если вы заключите содержимое события click в оператор if, как я делал в предыдущем примере, это сработает. Однако, в отличие от предыдущего примера, я прикрепляю атрибут к тегу привязки и читаю его, чтобы увидеть, находится ли он в состоянии анимации. Таким образом, вы можете иметь несколько элементов с этим типом блокирующего события

...