차고 문 이미지가 있습니다. 버튼 이미지를 클릭하면 위로 이동해야합니다. 하지만 문제는 버튼 이미지를 클릭하면 이동하지 않지만 이미지의 아래쪽에서 슬라이드 숨기기입니다. 당신이 이미지를 이동하려면 여기 내 코드Jquery slideToggle()
<script type="text/javascript">
$(document).ready(function(){
$(".open").click(function(){
$(".gate").slideToggle(3000)
});
});
</script>
<body>
<div class="main">
<a class="open" >Home page</a>
<div class="gate"></div>
</main>
</body>
.slideToggle()을 사용하면 안되며 높이 값에 애니메이션을 적용하여 요소를 숨기거나 표시하는 것입니다.
내가 준비한 예는 "홈페이지"단어를 누르면 게이트 개방을 애니메이션 .animate()를 사용하여 :
HTML을
<body>
<div class="main">
<a class="open">Home page</a>
<div class="gate"> </div>
</div>
</body>
jQuery를 참조
$(document).ready(function(){
$(".open").click(function(){
$(".gate").animate({
"top" : "-=" + $(".gate").outerHeight(true)
}, 3000);
});
});
애니메이션이 끝나는 위치는 최종 목표와 적용된 CSS에 따라 다릅니다.
, 당신은 대신 .slideToggle의()) .animate를 (사용해야합니다. .slideToggle() 함수는 사용자에게 요소를 표시하거나 숨 깁니다.
아무 일도 일어나지 않습니다. 작동하지 않습니다. – user1411101
슬라이드가 올바른 대답이 아닙니다. 슬라이드는 애니메이션 효과가 아닌 숨기기/페이드 효과입니다. 원하는 효과를 얻으려면 해당 요소의 CSS 속성에 애니메이션을 적용해야합니다. 요소를 약간 아래로 이동하려면 요소를 아래로 이동시킬 속성을 애니메이션으로 만들어야합니다. 다음과 같이 입력하십시오.
또한 최상위 속성을 사용하는 것이 좋습니다. 또는 css3 번역.
고맙습니다. 그것은 효과가 있었다. – user1411101