jQuery 애니메이션 페이드 인 페이드 아웃

Question

이미지가있는 슬라이드가 12 개 있습니다. jQuery 애니메이션을 사용하거나 페이드 인/페이드 아웃 효과를 사용하고 싶습니다. 여기에 내 코드입니다 :

$('#Li4').click(function() { 
    $('#bnrImg').fadein(1000); 
    $('#chnlLogo').fadein(1000); 
    $('#mainBanner').css('backgroundColor', '#FBB03E'); 
    $('#bnrImg').attr('src', 'images/cBanners/bnr_neuro.png'); 
    $('#chnlLogo').attr('src', 'images/images.png'); 
    $('#chnlLink').attr('href', 'http://link.tv'); 
    $('#bnrImg').fadeout(1000); 
    $('#chnlLogo').fadeout(1000); 
}); 
$('#Li5').click(function() { 
    $('#bnrImg').fadein(1000); 
    $('#chnlLogo').fadein(1000); 
    $('#mainBanner').css('backgroundColor', '#DB7EB4'); 
    $('#bnrImg').attr('src', 'images/cBanners/bnr_diabetes.png'); 
    $('#chnlLogo').attr('src', 'images/image.png'); 
    $('#chnlLink').attr('href', 'http://link.com'); 
    $('#bnrImg').fadeout(1000); 
    $('#chnlLogo').fadeout(1000); 
}); 

하지만 #의 LI4에서 #의 LI5에 클릭 할 때 문제가되면, #bnrImg 및 #chnlLogo는 애니메이션을하거나 내가 클릭 한 후/페이드 아웃 페이드. 슬라이드를 클릭 한 다음 페이드 아웃 효과를 적용한 다음 슬라이드가 변경된 후 이미지가 자동으로 사라집니다. 감사.

Answer 1

아마도 fadein/out 메서드에서 사용할 수있는 콜백 함수를 살펴보고 싶을 것입니다. 어쩌면 stopPropagation 및 preventDefault 메소드가 도움이 될 수도 있습니다.

Answer 2

확인. Jere는 완벽한 예제 코드입니다. 그냥 웹 페이지에 붙여 넣기 및 모든 이미지 경로를 변경합니다

HTML 코드 :

<div id="galleryContainer"> 
    <div id="photoShow"> 
    <div class="current"><img src="assets/banner/banner_one.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_two.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_three.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_four.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_five.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_six.jpg" width="900" height="324" class="gallery" /></div> 
    </div> 
</div> 

CSS 코드 :

#galleryContainer { 
    width:900px; 
    height:330px; 
    margin:0 auto; 
    position:relative; 
    padding-bottom:10px; 
} 
#photoShow { 
    position:relative; 
    width:900px; 
    height:324px; 
    margin:0 auto; 
} 
#photoShow div { 
    position:absolute; 
    z-index: 0; 
    margin-top:8px; 
} 
#photoShow div.previous { 
    z-index: 1; 
} 
#photoShow div.current { 
    z-index: 2; 
} 

그리고 여기 당신의 jQuery 코드 :

$(function() { 
    setInterval("rotateImages()", 5000); 
}); 
function rotateImages() { 
    var curPhoto = $('#photoShow div.current'); 
    var nxtPhoto = curPhoto.next(); 
    if (nxtPhoto.length == 0) 
    nxtPhoto = $('#photoShow div:first'); 
    curPhoto.removeClass('current').addClass('previous'); 
    nxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 2000, 
    function() { 
     curPhoto.removeClass('previous'); 
    }); 
    } 
});