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

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

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 个答案: