2011-10-22 64 views
0
<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中消失。如何在顯示5秒後將右側的div滑出瀏覽器窗口的右側,並在5秒後將左側div從瀏覽器左側滑出?jquery將div從瀏覽器窗口的一側滑出

+0

你能展示一些與這些div相關的css嗎?滑動將取決於您使用的CSS。 –

+0

'#left_image1 {position:fixed;寬度:50%;身高:100%; margin-left:0;背景:url(/images/1.jpg)} #right_image1 {position:fixed;寬度:50%;身高:100%;餘量:50%;背景:url(/images/2.jpg)}' – user852974

回答

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%' 
    }); 
}); 

注意,我們使用號碼delayfadeIn時間。然後,我們使用animate來處理左/右移動。

此外,我們隱藏CSS代替JavaScript;這是最佳做法。

此外,我們在CSS中指定left值以避免<body>上的邊距或填充的交互。

0

喜歡的東西

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

這是我得到的最遠http://jsfiddle.net/VrASZ/ –