jQuery将div从浏览器窗口的侧面滑出

Question

<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中逐渐消失。 如何在显示5s后使右侧的div滑出浏览器窗口的右侧，并在5s之后如何使左侧的div滑出浏览器的左侧？

Answer 1

工作的小提琴在这里。 这是更新的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>上的边距或填充进行交互。

Answer 2

就像是

$('#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);
});

jQuery将div从浏览器窗口的侧面滑出

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-10-22 04:24:55

解决方案2
0 2011-10-22 04:23:57

jQuery将div从浏览器窗口的侧面滑出

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-10-22 04:24:55

解决方案2 0 2011-10-22 04:23:57

解决方案1
1 已采纳 2011-10-22 04:24:55

解决方案2
0 2011-10-22 04:23:57