從窗口右側滑動DIV

Question

我有一個div，我需要在頁面加載時從右側滑出並保持鎖定在窗口的右側。 如果可以延遲大約5秒鍾然后滑出，那就太好了

<script type="text/javascript">
    $("#slide").animate({width: 'toggle'}, 500);
</script>

html

<div id="slide"><img src="live.jpg"></div>

我想念什么？

Answer 1

$(document).ready(function(){
    $('#slide').delay(5000).animate({"width":"20%"}, 0500);
});

從頁面完全加載后，這會使動畫延遲5秒鍾，然后將內容滑動到20％的寬度。 這是一個示例： http : //jsfiddle.net/EdjjH/

Answer 2

$(document).ready(function(){
    $("#slide").delay(5000);
    $("#slide").animate({
        width: '500px',
        height: '500px',
    });
});

這是小提琴： jsfiddle該小提琴具有5秒的延遲，因此在觀看時請耐心等待。

Answer 3

您可以嘗試幾種選擇。

如果要使用.animate（），則需要從其初始狀態更改位置。 因此，在CSS中，您需要將div的初始狀態設置為頁面之外的內容，例如

#slide {
  position: absolute;
  right: 999em;
}

使用此設置，添加.animate（）將使指定的屬性朝着指定的值進行動畫處理，因此請指定動畫結束后希望div結束的位置。

$("#slide").delay(5000).animate({right: 0}, 500);

另一種選擇是使用jQuery addClass（）方法。 如果執行此操作，則需要在樣式表中定義兩個類。 頭等艙將是您的div的初始狀態，再次位於屏幕外； 第二堂課將是您的div結束的地方。 對於動畫，只需使用如下CSS動畫：

.div-start {
  position: absolute;
  right: 999em;
  transition: right 4s ease-in;
  -webkit-transition: right 4s ease-in;
  -moz-transition: right 4s ease-in;
}

.div-animate {
  right: 0;
}

然后在您的jQuery中，執行以下操作：

$('yourDiv').addClass("div-animate");

編輯：您還可以在此上使用setTimeout，使其在5秒后啟動，例如：setTimeout（function（）{$（'yourDiv'）。addClass（“ div-animate”）;}，5000）;