Question

您的帮助将不胜感激：

我使用jQuery创建了这个滑块，你可以在这里看到：demo url

如果您想重新访问这些步骤，后退按钮会将您带回到开始（倒带动画）。

与倒带动画相关联，有一个.addClass("fadeOut")给予.textBox，以便它们淡出。

我想在完成倒带动画后摆脱.fadeOut，以便在点击.forward时这些框可以再次淡入。

我尝试使用下面的注释代码，但它似乎不起作用。

$('.forward').click (function(e) {  
    e.preventDefault(); 
    $(this).parent().parent().next().find($(".textBox")).addClass("fadeIn");
    $(this).parent().parent().next().find($(".textBox .forward")).addClass("fadeIn");
    $(this).addClass("fadeOut");
});


$('.moveFluxDouble').click (function(e) {   
    e.preventDefault(); 
    $(".flux").animate({"left": "-=66.6666666%"},"slow");
});


$('.moveFlux').click (function(e) { 
    e.preventDefault(); 
    $(".flux").animate({"left": "-=33.3333333%"},"slow");
});


$('.moveFluxBack').click (function(e) { 
    e.preventDefault(); 
    $(".flux").animate({"left": "0"},"slow");
    $(".forward").removeClass("fadeIn");
    $(".forward").removeClass("fadeOut");
    $(".textBox").removeClass("fadeIn");
    $(".textBox").not(".start .textBox").addClass("fadeOut");

    //.queue( 
        //function() {
        //$(".textBox").not(".start .textBox").removeClass("fadeOut");

});

Answer 1

尝试这个我觉得如果你使用纯css的动画

会更有用

$(".flux").on(
        "webkitAnimationEnd oanimationend msAnimationEnd animationend",
        function() {
            $(".textBox").removeClass('fadeOut');
        }
    );

Answer 2

现在解决：我确实使用了

setTimeout(function(){ $(".textBox").removeClass('fadeOut')},1000); 而不是.queue注释的代码（不要注意它！）。

Answer 3

jquery animate有一个处理程序，可以在动画完成后调用它。

  $(".flux").animate({
     left: "-=33.3333333%"
  }, "slow", function() {
    alert("Animation Completed);
  });

Answer 4

jQuery animate有一个回调函数完整，一旦动画完成就会被调用。所以，一般来说你可以尝试：

jQuery("element_id_or_class").animate({
  //css properties
}, 5000, function() {
  // Animation complete.
});

请参阅documentation

如何在动画完成后删除类？

4 个答案: