從左側滑動DIV

我正在嘗試使用簡單的div（leftContainer），並希望在頁面加載時將其從左側滑動到其總寬度，而不是單擊按鈕。從左側滑動DIV

這裏是我的代碼：

<div class="leftContainer "> 
<div class="header">Header</div> 
<div class="mainbody"> 
    <p>Body</p> 
</div>

DEMO

來源

2012-05-09 coder

其格？頭？主體？ – lbstr

[你有什麼嘗試？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – j08691

@ lbstr對不起，我剛剛updated.Anyways我需要動畫的總div（ leftContainer） – coder

$("div.leftContainer") 
    .css("margin-left",-$(this).width()) 
    .animate({ 
     marginLeft:0 
    }, 700);

demo

來源

2012-05-09 16:39:36 kei

@ kei-這正是我期待的。 – coder

您可以動畫使用jQuery的寬度。

http://jsfiddle.net/YCVhH/9/

$('.leftContainer').animate({ width: '100%'});

來源

2012-05-09 16:30:24 mrtsherman

@ mrtsherman-首先感謝您的答覆。我需要從margin：0px到margin：308px（即div寬度）進行動畫處理。 – coder

@coder - 你的意思是這樣嗎？保證金 - 左= div寬度？或者你需要滑動它，使右邊緣對着屏幕？ http://jsfiddle.net/YCVhH/18/ – mrtsherman

@coder - 這是一個滑到屏幕另一側的地方。在這三個希望之間我擊中了這個印記！ http://jsfiddle.net/YCVhH/21/ – mrtsherman

做了一個簡單的例子，不知道你正在嘗試做的。

http://jsfiddle.net/YCVhH/12/

用動畫做任何你想做animate();

$(".leftContainer").animate({ left: "50%" });

來源

2012-05-09 16:31:12

@ Ricardo-First感謝您的回覆。我需要爲div創建動畫，而不是從原始位置開始，但從邊距：0px到它的總寬度 – coder

嘗試以下操作：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("div.leftContainer").animate({width:100%}, "slow"); 
    }); 
</script>

如果你正在尋找一個固定的寬度，而不是100％，改變這一點。祝你好運！如果它不起作用，請更清楚你想做什麼，我會盡力協助你。

來源

2012-05-09 16:33:47 Nathanael

從左側滑動DIV

回答

相關問題