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-动画”）。 }，5000）;

从窗口右侧滑动DIV

3 个答案: