onclick 후 두 번째 시간 동안 함수가 실행되지 않습니다.

Question

JQuery 슬라이더의 세 번째 슬라이드에서 작동해야하는 애니메이션은 처음에는 정상적으로 작동하지만 두 번째 및 연속 시간에는 정상적으로 작동하지 않습니다. 애니메이션은 슬라이더의 다음 버튼으로 묶여 있습니다. 다음 버튼을 클릭하면 현재 슬라이드에서 "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

문제는, 때마다 당신이 개에게 다음 또는 이전 버튼 전화를() 함수는 대상 사업부에 대한 새로운 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를 만듭니다. 동적 시나리오에 적합합니다. jsFiddle에서

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

그래서이 스 니펫 코드에는 몇 가지 문제가 있습니다.

1. else if {
   그렇지 않으면 단지 else {을 사용합니다 (condition)이 있어야합니다.
2. 300 밀리 초 길이의 애니메이션에서 슬라이드의 순서를 전환하면 eq(2)의 신뢰성이 떨어집니다. 클릭 할 때마다 다음, eq(2)은 다를 것입니다. 실제로이 방법을 사용하는 유일한 방법은 이러한 300 밀리 초 내에 다음 링크를 세 번 반복해서 클릭하는 것입니다. 대신 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>