Jquery slide div 위로

Question

약간의 도움이 필요합니다. 매우 간단한 jquery 슬라이더를 만들려고합니다. 버튼을 클릭 할 때 4 개의 div가 위로 움직여야합니다. 그러나 나는 이것을 어떻게하는지 주위에 내 머리를 감쌀 수는 없다. 여기에 내가 jsfiddle.net에있는 것입니다 :

<div id="slider"> 
<div class="slide1" style="background: red"></div> 
<div class="slide2" style="background: green"></div> 
<div class="slide3" style="background: black"></div><br clear="all"> 
</div> 
<button id="prev">Previous</button> 
<button id="next">Next</button>​ 

JQUERY :

$("#next").click(function(){ 
    $(".slide1").slideUp(); 
});​ 

하지만 자동으로 다음 사업부에 최대 슬라이드 필요할 여기 http://jsfiddle.net/liveandream/LFAMW/

그리고 나의 코드 다음 및 이전 클릭. 제발 어떤 도움을 주시면 감사하겠습니다!

Answer 1

당신은 this 뭔가를하려고합니까?

HTML :

<div id="slider"> 
<div class="slide" style="background: red"></div> 
<div class="slide" style="background: green;display: none;"></div> 
<div class="slide" style="background: black; display: none;"></div><br clear="all"> 
</div> 
<button id="prev">Previous</button> 
<button id="next">Next</button> 

자바 스크립트 :

$("#next").click(function(){ 
    var $next = $(".slide:visible").slideUp().next('.slide'); 
    if($next.size() < 1) { 
     $next = $(".slide:first"); 
    } 
    $next.slideDown(); 
}); 

$("#prev").click(function(){ 
    var $prev = $(".slide:visible").slideUp().prev('.slide'); 
    if($prev.size() < 1) { 
     $prev = $(".slide:last"); 
    } 
    $prev.slideDown(); 
}); 

CSS :

여기

.slide { 
width: 300px; 
height: 300px; 

} 
#slider{ 
width: 300px; 
height: 300px; 
} 

Answer 2

이 시도 :

<div id="slider"> 
<div class="slide1 slide current" style="background: red"></div> 
<div class="slide2 slide" style="background: green"></div> 
<div class="slide3 slide" style="background: black"></div><br clear="all"> 
</div> 
<button id="prev">Previous</button> 
<button id="next">Next</button>​ 

JS를 :

$("#next").click(function(){ 
    $(".current").slideUp(); 
    $('.current').removeClass('current').next('.slide').addClass('current'); 

});​ 

이전 버튼에 대한 몇 가지 논리를 추가해야합니다, 당신은 마지막이나 처음 DIV

에있을 때 결정하기 위해

Answer 3

마커 클래스로 div를 표시하고 jQuery로 마커를 이동할 수 있습니다. 예 :

<div id="slider"> 
<div class="slide1 slide current" style="background: red"></div> 
<div class="slide2 slide" style="background: green"></div> 
<div class="slide3 slide" style="background: black"></div><br clear="all"> 
</div> 
<button id="prev">Previous</button> 
<button id="next">Next</button>​ 

---

$("#next").click(function(){ 
    $(".current").slideUp(function() { 
     $(this) 
      .removeClass('current') 
      .next('.slide') 
      .addClass('current'); 
    }); 
});​ 

jsfiddle here

Answer 4

JQuery와 전체 슬라이드 쇼 이전 및 다음 솔루션입니다 :

$(document).ready(function() { 
$("#next").click(function() { 
    if ($('.current').next('.slide').length > 0) { 
     $(".current").slideUp(); 
     $('.current').removeClass('current').next('.slide').addClass('current'); 
    } 

}); 
$("#prev").click(function() { 
    if ($('.current').prev('.slide').length > 0) { 
     $('.current').removeClass('current').prev('.slide').addClass('current'); 
     $(".current").slideDown(); 
    } 

}); 

,

});

나는 이것이 내가 한혜진 감사합니다 찾고 있었는지 정확히 당신이 놀라운 http://codebins.com/codes/home/4ldqpc9