<script>
$(function(){
$('#right_image1').hide().delay('10000').fadeIn('5000');
$('#left_image1').hide().delay('10000').fadeIn('5000');
});
</script>
/* CSS */
#left_image1 { position: fixed; width: 50%; height: 100%; margin-left: 0; background: url(/images/1.jpg) }
#right_image1 { position: fixed; width: 50%; height: 100%; margin-left: 50%; background: url(/images/2.jpg) }
这目前在 10 秒延迟后淡入两个 div。如何让右边的div显示5s后从浏览器窗口右侧滑出，左边的div显示5s后从浏览器左侧滑出？
最佳答案
工作 fiddle 是 here .这是更新后的 JavaScript:
$(function() {
$('#right_image1').delay(10000).fadeIn(500).delay(5000).animate({
marginLeft: '100%'
});
$('#left_image1').delay(10000).fadeIn(500).delay(5000).animate({
marginLeft: '-50%'
});
});
请注意，我们使用数字表示 delay和 fadeIn 的持续时间.然后，我们使用 animate处理左/右运动。
此外，我们使用 CSS 而不是 JavaScript 进行隐藏；这是最佳实践。
此外，我们在 CSS 中指定了 left避免 <body> 上边距或填充交互的值.
关于javascript - Jquery 将一个 div 滑出浏览器窗口的一侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7857092/