如何製作div滑動

Question

對不起，我是JQUery的新手，想知道如何製作Div Slide？

jQuery是困惑我，真的只需要幫助

Answer 1

HTML

 
<a id="click_to_slide">Click To Slide Down</a> 
<div id="slide_me_down"></div> 

CSS

 
#slide_me_down { 
    display: none; 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
} 

JAVASCRIPT

 
$(document).ready(function() { 
    $('#click_to_slide').live('click', function() { 
     $('#slide_me_down').slideDown(); 
    }); 
}); 

這裏是上面代碼的的jsfiddle ：http://jsfiddle.net/EfmeW/

此外，如果你想擁有DIV效果基本show和向下取決於DIV是否是已經可見或不可見，你可以使用.slideToggle（）代替.slideDown（）

Answer 2

使用以下的JQuery。由於JQuery使用CSS選擇器來查找元素，因此您需要使用類myDivClass。 document.ready部分是爲了確保在執行Javascript之前完全下載/解析頁面（這是關鍵的一步）。

$(document).ready(function() { 
    $('.myDivClass').slideDown(); 
}); 

這裏是一個JSFiddle作爲一個例子具有一個div滑下上的按鈕按壓。

P.S.如果你正在使用Firebug或Chrome，你現在就可以在這個頁面上嘗試一下！

$('#hlogo').hide().slideDown('slow'); 

Answer 3

若要將元素滑下來，只是用這樣的：這裏

<script type="text/javascript"> 
$(document).ready(function() { 
$('#test').slideDown(); 
}); 
</script> 

<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div> 

退房的例子：http://jsfiddle.net/WvVf3/1/

希望這有助於。

Answer 4

當你說滑下去，你的意思是：

• 使DIV出現由下滑：$('#me').slideDown();

或

• 使DIV滑下：$('#me').css('position','relative').animate({top:'+200'},'slow');

http://jsfiddle.net/rkw79/AnTDk/5/

Answer 5

試試這個：

HTML：

<button id="click_to_slide"></button> 
<div id="me_down" style="display:none;">I'm Sliding down</div> 

的Javascript：

$('#click_to_slide').click(function() { 
     $('#me_down').slideDown(); 
    }); 

和可選的CSS：

#me_down { 
    color:white; 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
} 

試試這個，它會工作:)