jquery로 슬라이드 다운 효과

데이터가있는 div가 하나 있다고 가정합니다. 나는 버튼을 클릭하면 새로운 div가 만들어지고 셔터와 같은 실제 div를 덮을 때가 되길 원한다. 여기에 아주 가까운 사이트에서 얻은 샘플 코드가 있지만 원하는 방식은 아닙니다.jquery로 슬라이드 다운 효과

$(document).ready(function() { 
    var $box = $('#box') 
    .wrap('<div id="box-outer"></div>'); 
    $('#blind').click(function() { 
    $box.blindToggle('slow'); 
    });  
});

체크 위의 코드 http://www.learningjquery.com/2008/02/simple-effects-plugins 의 데모는 사이트에 가서 그냥 내가 일을 할 방법을보기 위해 블라인드 토글 버튼을 클릭합니다. 버튼을 클릭하면 새 div가 만들어지고 새 div는 실제 div가 아래쪽 효과 슬라이드로 표시되며 다시 클릭하면 jquery를 사용하여 새 div가 슬라이드 up.how로 슬라이드됩니다. 가능한 경우 샘플 코드로 안내해주십시오. 덕분에

출처

2012-05-02 Thomas

$('selector').slideDown() 체크 당신은 당신의 코드 이미 꽤 많은이 제공 한 링크. 몇 가지 조작 만하면됩니다.

데모 : http://jsfiddle.net/dACjL/

출처

2012-05-02 19:40:48 kei

감사합니다 .... 당신의 코드는 거의 비슷하지만, 처음에는 버튼을 클릭 할 때 상자 div가 처음에는 데이터 div를 덮지 않을 것입니다. 그런 다음 상자 div가 아래로 밀어서 & 덮을 것입니다. "데이터 상자 "버튼을 다시 클릭하면 box-div가 위로 이동하여 data-div를 찾습니다. ur 코드의 변경을하십시오. 좋은 코드 주셔서 감사합니다. – Thomas

나는 여기에서 CSS 비트를 바꿈으로써 지금 내가 원하는대로 작동하고있다. 변경은 여기에

Blind me up. Blind me up. Blind me up.

처럼 나는 마진 - 상단을 0px에서 -120px로 바꾼다. 그래서 지금 그것은 나에게 올바른 냄새를주고있다. 감사 – Thomas

네이티브 기능은 .slideUp()과 .slideDown()으로되어 있습니다.

업데이트 : 내가 제대로 이해하지만, 여기에 demo 경우 확실하지.

출처

2012-05-02 19:13:52 Starx

예 내가 .I 시도하지만 내가 원하는 시뮬레이션 할 수 있습니다 알고있다. 나는 버튼이 클릭되면 새로운 div가 만들어 질 것이고 새로운 div는 효과가있는 슬라이드와 실제 div를 덮을 것이고, 다시 클릭하면 새로운 div가 위로 움직일 것입니다. u 코드가 도움이 될 수 있습니다. – Thomas

@ 토마스, 코드를 통해 도움을받을 수 있지만 먼저 원하는 것을 알려주십시오. 당신이 원하는 것을 보여주는 간단한 그림을 보여줄 수 있습니까? – Starx

그냥 사이트로 이동 여기에 내 질문에 링크를 준. 그러면 내가 원하는 걸 볼 수 있습니다. 제 경우에는 새로운 div가 슬라이드 다운 효과가있는 실제 큰 div를 덮을 것입니다. – Thomas

slideUp() 및 slideDown 기능을 사용하십시오.

$('selector').slideUp() 여기에 체크 http://api.jquery.com/slideUp/

여기 http://api.jquery.com/slideDown/

출처

2012-05-02 19:16:06

나는 slideUP()과 slideDown() 함수를 알고있다. 그러나 slideUP() 및 slideDown()과 같은 기본 함수를 사용하여 실제 div를 새 div로 덮는 방법. 가능한 경우 샘플 코드로 알려줄 수 있습니다. – Thomas

u는 'after()'를 사용하여 특정 선택기 다음에 새 div를 추가해야하고 div라는 새로운 div에 실제 div를 추가해야합니다. 그것을 시도해보십시오. –

jquery로 슬라이드 다운 효과

답변

관련 문제