jQuery将div从浏览器窗口的侧面滑出
[英]Jquery sliding a div out of the side of the browser window
问题描述
<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) }
This currently fades in two divs after a 10 second delay. 
目前，在经过10秒的延迟后，它会在两个div中逐渐消失。 How can I get the div on the right to slide out of the right side of the browser window after 5s of being displayed and the left div to slide out of the left side of the browser after 5s? 如何在显示5s后使右侧的div滑出浏览器窗口的右侧，并在5s之后如何使左侧的div滑出浏览器的左侧？
2 个解决方案
解决方案1
1 已采纳 2011-10-22 04:24:55
A working fiddle is here . 工作的小提琴在这里 。 Here is the updated JavaScript: 这是更新的JavaScript：
$(function() {
$('#right_image1').delay(10000).fadeIn(500).delay(5000).animate({
marginLeft: '100%'
});
$('#left_image1').delay(10000).fadeIn(500).delay(5000).animate({
marginLeft: '-50%'
});
});
Note that we use numbers for delay and the duration of fadeIn . 请注意，我们使用数字表示delay和fadeIn的持续时间。 Then, we use animate to handle the left/right movement. 然后，我们使用animate来处理左右移动。
Additionally, we hide with CSS instead of JavaScript; 另外，我们用CSS而不是JavaScript隐藏； that's best practice. 这是最佳做法。
Also, we specify in the CSS the left value to avoid interaction from margin or padding on the <body> . 另外，我们在CSS中指定left值，以避免与<body>上的边距或填充进行交互。
解决方案2
0 2011-10-22 04:23:57
Something like 就像是
$('#right_image1').hide().delay('10000').fadeIn('5000', function() {
$(this).animate({right: '-1px'}, 5000);
});
$('#left_image1').hide().delay('10000').fadeIn('5000', function() {
$(this).animate({left: '-1px'}, 5000);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.