从窗口右侧滑动DIV

我有一个div，我需要在页面加载时从右侧滑出并保持锁定在窗口的右侧。这将是巨大的，如果它可能会推迟约5秒钟，然后滑出从窗口右侧滑动DIV

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

HTML

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

我在想什么？

来源

2014-03-06 user3357774

[.delay]（http://api.jquery.com/delay/）延迟执行，你所缺少的是你改变的宽度不是元素的位置，动画的左或右风格。 –

我需要改变位置@PatrickEvans – user3357774

这就是为什么我说你必须动画'左'或'右'风格，'动画（{右：“100px”}，500）' –

你可以尝试几个选项。

如果你想使用.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）;

来源

2014-03-06 21:57:22 Jim

我如何摆脱底部的滚动条，因为它的关闭屏幕？ – user3357774

这些可能是你的溢出设置处于缺省状态的结果，它会添加滚动条。将您的溢出属性设置为隐藏在您正在获取滚动条的任何属性上。 – Jim

所以 'div {overflow：hidden; }' – Jim

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

这会在页面完全加载后将您的动画延迟5秒，然后将内容滑动到20％的宽度。下面是一个例子：http://jsfiddle.net/EdjjH/

来源

2014-03-06 21:53:48 SVehrenkamp

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

这里是小提琴：看着它时jsfiddle 这拨弄有一个5秒的延迟，所以要患者。

来源

2014-03-06 21:56:24 griff4594

从窗口右侧滑动DIV

回答

相关问题