div의 내용을 위에서 슬라이드하는 방법은 무엇입니까?

Question

인터넷에서 참조를 사용하여 작업을 만들었습니다 ... 그 위의 이미지가 아니라 아래에서 다른 이미지를 가져올 수 있는지 알고 싶었습니다.

HTML

<div id="slide1_container" class="shadow"> 
    <img src="images/Turtle.jpg" id="one"/> 
    <img src="images/Windows Logo.jpg" id="two" /> 
</div> 
</div> 

CSS

#slide1_container { 
    width:450px; 
    height:281px; 
    overflow:hidden; /* So the sliding bit doesn't stick out. */ 
} 

#one { 
    padding:0; 
    margin:0; 
    float:left; 
} 

#two { 
    padding:0; 
    margin:0; 
    float:left; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
    -o-transition:all 0.5s ease; 
    transition:all 0.5s ease; 
    z-index:1; 
} 

자바 스크립트

$(document).ready(function() { 
    $('#slide1_container').mouseover(function(){ 
    $("#two").css("transform","translateY(-281px)"); 
    }); 
}); 
$(document).ready(function() { 
    $('#slide1_container').mouseout(function(){ 
    $("#two").css("transform","translateY("+$(this).index() * -281+"px)"); 
    }); 
}); 

Answer 1

은 왜 그냥 jQuery의 slideup를 사용 slidedown하지? 그것은 또한 당신을 위해 CSS를 돌볼 것입니다. 여기

추가 읽기 :