jquery将div从浏览器窗口的一侧滑出 [英] Jquery sliding a div out of the side of the browser window
问题描述
<脚本>
$（'＃right_image1'）。hide（）。delay（'10000'）。fadeIn（'5000'）;
$（'＃left_image1' ）.hide（）。delay（'10000'）。fadeIn（'5000'）;
}）;
< / script>
/ * CSS * /
＃left_image1 {position：fixed;宽度：50％;身高：100％; margin-left：0;背景：url（/images/1.jpg）}
＃right_image1 {position：fixed;宽度：50％;身高：100％;余量：50％;背景：url（/images/2.jpg）}
第二次延迟。 5秒后，如何让右侧的div滑出浏览器窗口的右侧，并在5秒后左侧的div滑出浏览器的左侧？
工作小提琴是此处。这里是更新后的JavaScript：
$ $ $ $ $（'＃
$（'＃right_image1'）。delay（ 10000）.fadeIn（500）.delay（5000）.animate（{
marginLeft：'100％'
}）;
$（'＃left_image1'）。delay（10000）。 fadeIn（500）.delay（5000）.animate（{
marginLeft：'-50％'
}）;
}）;
请注意，我们使用延迟的数字和持续时间 fadeIn 。然后，我们使用 animate 来处理左/右移动。
另外，我们用CSS代替JavaScript ;这是最好的实践。
另外，我们在CSS中指定 left 值以避免与边距或填充< body> 。
<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. 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?
A working fiddle is here. Here is the updated 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. Then, we use animate to handle the left/right movement.
Additionally, we hide with CSS instead of JavaScript; that's best practice.
Also, we specify in the CSS the left value to avoid interaction from margin or padding on the <body>.
这篇关于jquery将div从浏览器窗口的一侧滑出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
