Jquery 페이드 인, 슬라이드 다운, 다음 이미지, 리셋 슬라이드

jquery에서 일부 코드를 반복하여 div 내부의 일부 이미지를 페이드 인하 고 각 이미지를 페이드 인하다가 해당 이미지를 위로 슬라이드합니다 (div가있는 div가 있음). 오버플로가 숨겨져있는 높이가 이미지보다 작음) - 다음 이미지로 이동하고 슬라이드 업, 반복 - 그러나 슬라이드를 재설정해야 이미지의 다음 루프에서 맨 위에 "고정"되지 않습니다.Jquery 페이드 인, 슬라이드 다운, 다음 이미지, 리셋 슬라이드

모든 것이 페이딩과 첫 번째 슬라이드 (margin-top : -108px;)와 관련하여 훌륭하게 작동합니다. 그러나 다음 반복을 위해 margin-top을 0px로 재설정하려고하면 재설정하지 않습니다. 다음 반복에서 이미지는 여전히 -108px 위치에 있습니다.

멍청한 실수가 있다면 제 Jery 코드를 용서해주십시오. 나는 그것에 익숙하지 않습니다! 여기

내 코드입니다 :

CSS

 <style type="text/css" media="screen"> 
     #slider { height:296px; overflow:hidden; width:822px; position:absolute; left:50%; margin-left:-411px; top:87px; z-index:20; } 
     #slider-back { position:absolute; left:50%; margin-left:-411px; height:296px; z-index:29; top:87px; width:822px; background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent; } 
    </style>

HTML

<div id="slider"> 
     <a href="#"><img src="images/banner/Image1.jpg" id="image1" /></a> 
     <a href="#"><img src="images/banner/Image2.jpg" id="image2" /></a> 
     <a href="#"><img src="images/banner/Image3.jpg" id="image3" /></a> 
    </div> 
    <div id="slider-back"></div>

JQUERY

,439 다음과 같이 9,353,210

출처

2012-10-24 99823

당신은 다른 애니메이션 자체가 사용자가 설정 한 여백 정상보다 우선합니다, 애니메이션의 complete 콜백에 여백을 다시 이렇게해야

$(this).animate({marginTop:'-108px'}, {queue: false, duration:6000, complete: function(){ 
    $(this).css("margin-top","0px"); 
}});

출처

2012-10-24 22:48:23 Nelson

감사합니다! 완벽하게 일했다! "완전한"콜백이 존재한다는 것을 알지 못했습니다. 다시 한번 감사드립니다. – 99823

여러분을 환영합니다! – Nelson

당신이 매우 짧은 코드를 좋아하는 경우에, 시도 plugin jquery-timing. 애니메이션 연결을위한 소형 연결 구문을 제공합니다. 인라인 루프도 있습니다. 이 플러그인 당신의 전체 코드와

는 하나의 jQuery를 체인으로 귀결 :

$('#slider > a > img').hide().repeat().each($).css({marginTop:0}) 
    .fadeIn(500).animate({marginTop:-108},6000,$).fadeOut(300);

출처

2012-10-25 07:50:38 peter

Jquery 페이드 인, 슬라이드 다운, 다음 이미지, 리셋 슬라이드

답변

관련 문제