2017-11-16 33 views
-2

제 코드에서 이미지가 거의없고 슬라이더로 표시하려고 했으므로 clickme 버튼을 클릭하면 이미지가 다음 이미지로 바뀝니다.이 기능을 성공적으로 수행했지만 내가 애니메이션을 원하는, 내가 clickme 버튼을 클릭하면 다음 현재 이미지가 페이드 아웃과 다음 이미지는 여기에 그냥 작은 도움이 필요 fadeIn 및 fadeOut이 예상대로 작동하지 않습니다.

$('#allimg li:first').addClass('activeimg'); 
    //code for like and next image 
    $('.clickme').on('click', function() { 
    var tagname = $('.activeimg img').attr('name'); 
    if ($('#allimg li.activeimg').index() + parseInt(1) !== $('#allimg li').length) { 
     $('.activeimg').removeClass('activeimg').fadeIn().next('#allimg li').addClass('activeimg').fadeOut(); 
     } 
    }); 

,

+0

당신은 당신의 문제를 복제하는 데 필요한 최소 코드를 공유해야하는 데 도움이됩니다. 그렇지 않으면 우리는 당신을 도울 수 없습니다. –

+0

코드와 함께 JSBin, codepen 또는 비슷한 것을 만들 수 있습니까? – Zvezdas1989

+0

너희들은이 코드에서 fadeIn fadeOut을 추가하는 법조차 모를거야? 사실 내 코드가 너무 무겁습니다 –

답변

0

이 fadeIn, 난 할 수 없어요 을해야한다 fadeIn과 fadeOut의 아주 기본적인 구현.

코드가 완료되지 않았으므로 나는 내 자신을 창조했다.

희망이

$("button").click(function(){     
 
     $("#dog1").fadeOut("slow"); 
 
     $("#dog3").fadeIn("slow"); 
 
    });
#dog3 { 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://i.pinimg.com/originals/b0/d7/08/b0d708c285de860ce5d51a8d558409dc.jpg" width ="100px" height="100px" id="dog1"> 
 
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" width ="100px" height="100px" id="dog3"> 
 
<button> Fade Images </button>