函数在点击后第二次未执行

function not executing for the second time after onclick

本文关键字：第二次执行函数更新时间：2023-09-26

应该在 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();
    };
});

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

方法 1：第一个 jsfiddle 1，维护一个补间最大动画对象。只需通过调用 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：第二个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();
});

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

else if {必须有(condition)，否则就用else {。
您正在切换 300 毫秒长动画中幻灯片的顺序，这使得eq(2)的可靠性非常差。每次单击"下一步"时，eq(2)都会有所不同。事实上，点击它的唯一方法是在这 300 毫秒内重复单击"下一个"链接三次。我建议改用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>