세로 JQuery와 애니메이션

이미지를 클릭 할과 수직 화소의 일정량을 애니메이션으로 표시 (50 말하게) 위쪽. 다시 한 번 클릭하고 다시 원위치로 되돌아갑니다.

지금까지는 내 코드가 작동하지 않습니다.

$("#content").click(function() { 
$("#content").animate(
     {"left": "toggle"}, 
     "slow"); 
});

이 경우 콘텐츠는 단지 div입니다. 단추를 클릭하는 간단한 자습서를 할 수 있으며 div를 왼쪽이나 오른쪽으로 옮길 수는 있지만 div를 단추로 만들 수 없으며 위로 또는 아래로 갈 수도 없습니다.

감사의 말 :

감사합니다.

출처

2012-09-05 James Mclaren

대신보십시오 :이 도움이 될 것입니다

$(function(){ 
var originalHeight = $("#content").height(); 
$("#content").click(function() { 
    var $this = $(this); 
    $("#content").animate(
     {height: ($this.height()==originalHeight ? (originalHeight+50):originalHeight)},  
     "slow"); 
    }); 
});

DEMO

희망.

출처

2012-09-05 16:32:05

불행히도, 아무 것도하지 않았습니다. –

@JamesMclaren,이 evnet은 document.ready로 작성해야합니다. 라이브 데모로 내 대답을 업데이트했습니다. –

예 onload를 추가했습니다. 그러나 높이 만 바뀌 었습니다. 높이를 변경하여 div를 이동 시켰으므로 높이를 변경하지 않았습니다. 그러나 다른 답변과 유사하게 div는 페이지 상단으로 이동하게됩니다. –

이 시도 :

$(document).ready(function() { 
    var up = false; 
    $("#content").click(function() { 
     var newTop = "+=50px"; 
     if (up) { 
      newTop = "-=50px"; 
     }   
     $(this).animate({ top: newTop}, "slow"); 
     up = !up; 
    }); 
});

편집 : 나는 당신을 위해 위의 $(document).ready()을 추가했다. 또한 jsFiddle에서이 애니메이션을 볼 때 발생하는 "줄무늬"는 jsFiddle로 제한되며 페이지에는 정기적으로 발생하지 않습니다.

행운을 빈다. :)

출처

2012-09-05 16:32:45

명확하지 않은 경우에, 요소가 이미 움직 였다면 'up'변수가 나타납니다. 혼란스러운 점에 죄송합니다. –

이전의 응답과 유사합니다. 아무 반응이 없습니다. –

document.ready를 추가했는지 기억 했습니까? –

는 다음과 같은 시도 :

HTML

을

<a href="#" class="moveMe"><img src="..." /><span>Move Me</span></a>

CSS

.moveMe { 
    position: relative; 
    display: block; 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
} 

.moveMe img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 250px; 
} 

.moveMe span { 
    position: absolute; 
    display: block; 
    bottom: 0; 
    left: 0; 
    padding: 10px 0; 
    width: 100%; 
    color: #fff; 
    text-align: center; 
    background: #000; 
}

,232 필요에 따라

JSFiddle Here

(10)는 CSS width 및 height을 조정합니다.

도움이 되었기를 바랍니다.

출처

2012-09-05 16:35:30 dSquared

세로 JQuery와 애니메이션

답변

관련 문제