Question

应该在JQuery滑块的第3张幻灯片中工作的动画第一次工作正常但不是第二次和连续时间。动画与滑块的下一个按钮相关联。单击下一个按钮可从当前幻灯片中删除“show”属性，并将“show”属性添加到下一张幻灯片。我已经尝试了几天通过研究类似的场景并尝试不同的解决方案进行调试，但是这样做是不行的。有人可以帮忙吗？

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

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

else if {必须有(condition)，否则只需使用else {。
您正在切换300毫秒长动画中幻灯片的顺序，使eq(2)的可靠性非常差。每次点击下一步时，eq(2)都会有所不同。实际上，击中它的唯一方法是在这300毫秒内反复单击 Next 链接三次。我建议改用class或data-attribute;无论幻灯片放映的状态如何，都不会改变。
最后，但并非最不重要的是，回答你的问题...... 假设只能工作一次。为了让动画多次播放，您需要先“回放”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>

Answer 2

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

方法1：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();
});

onclick后第二次执行功能

2 个答案: