onclick 后第二次没有执行函数

Question

应该在 JQuery 滑块的第三张幻灯片中运行的动画第一次运行良好，但第二次和连续两次运行良好。动画与滑块的下一个按钮相关联。单击下一个按钮会从当前幻灯片中删除“显示”属性，并将“显示”属性添加到下一张幻灯片。我已经尝试了几天来通过研究类似的场景并尝试不同的解决方案来调试它，但到目前为止这是不行的。任何人都可以帮忙吗？

function dog(){
    var dog = document.getElementById('dog_2');
    TweenMax.to(dog, 2, {left:"325px", repeat:2, yoyo:true});
}

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 300, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('#slider').on('click', 'a.control_next', function (){
    moveRight();

    if($("li").next().length > 0){
        var next = $("#slider .slideshow .show").removeClass("show").next("li");
        next.addClass("show");
    } 

    else if  {
        $("li:last").removeClass("show");
        $("li:first").addClass("show");
    }

    if ($("li").eq(2).hasClass("show")){
        dog();
    };
});

Answer 1

问题是，每次单击下一个或上一个按钮时，对 dog() 函数的调用都会在目标 div 上创建一个新的 tweenmax 动画实例。多个动画实例使其挂起。

方法一：First jsfiddle 1，维护一个tweenmax动画对象。只需在特定条件下通过调用 dog() 重新启动它；功能。

jQuery(document).ready(function ($) {
  var animate;
  var doggy = document.getElementById('dog_2');  
  animate = TweenMax.to(doggy, 2, {left:"325px", repeat:true, yoyo:true}); 

   function dog(){ 
     animate.restart();    
   } 
  ...........
  .............
  }); 

方法 2：Second jsfiddle。通过使用 jQuery 注入 HTML 创建目标 DIV。适合动态场景。

function dog(){
  var dog = document.getElementById('dog_2');  
  dog.remove();  
  $("li.dog").html("<div id=\"dog_2\"><img src=\"https://pbs.twimg.com/profile_images/604644048/sign051.gif\" style=\"height:50px;width:50px\"/></div>");
  var dog = $('#dog_2');
  //TweenMax.killTweensOf(dog);     
  animate =TweenMax.to(dog, 2, {left:"325px", repeat:true, yoyo:true});  
  animate.play();    
}  


$('#slider').on('click', 'a.control_next,a.control_prev', function (){
    if($(this).hasClass('control_next'))
    {moveRight();}
    else{ moveLeft();}
    var prev = $("#slider .slideshow .show").removeClass("show").next("li");
    prev.addClass("show");
    if ($("li").eq(2).hasClass("show")){
      // call dog(); on some condition if required.
    }; 
    dog();
});

Answer 2

所以这段 sn-p 代码有几个问题。

1. else if { 必须有(condition)，否则只需使用else {。
2. 您在 300 毫秒长的动画中切换幻灯片的顺序，导致 eq(2) 的可靠性非常差。每次单击下一步，eq(2) 都会有所不同。事实上，点击它的唯一方法是在这 300 毫秒内重复点击 Next 链接三次。我建议改用class 或data-attribute；无论幻灯片处于何种状态都不会改变的东西。
3. 最后但同样重要的是，回答您的问题……它应该只工作一次。为了使动画多次播放，您需要“倒带”reverse() 才能再次播放。

看看我在下面做了什么。希望对您有所帮助！

var animation = null;

function dog(){
    if (animation !== null) {
        animation.reverse(-2);
    }
    
    var dog = document.getElementById('dog_2');
    animation = TweenMax.to(dog, 2, {left:"325px", repeat:2, yoyo:true});
}

function moveRight() {
    var slideWidth = 325;
    $('#slider ul').animate({
        left: - slideWidth
    }, 300, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('#slider').on('click', 'a.control_next', function (){
    moveRight();

    if($("li").next().length > 0){
        var next = $("#slider .slideshow .show").removeClass("show").next("li");
        next.addClass("show");
    } 

    else {
        $("li:last").removeClass("show");
        $("li:first").addClass("show");
    }

    if ($("li").attr("data-dog") === "true"){
        dog();
    }
});

#dog_2 {
    position: absolute;
}

.control_next {
    position: absolute;
    bottom: 0;
}

ul {
    position: absolute;
}

li {
    display: none;
    width: 325px;
    height: 325px;
    background: lightblue;
}

li.show {
    display: block;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dog_2">dog</div>
<div id="slider">
    <ul class="slideshow">
        <li class="show">a</li>
        <li>b</li>
        <li data-dog="true">c - dog</li>
        <li>d</li>
    </ul>
    <a href="#" class="control_next">Next</a>
</div>