jquery - 让 div 飞过屏幕

Question

我有两个袋子图像，我想同时飞过屏幕。最后，它们将消失，然后重新出现在不同的位置，除非刷新页面，否则它们将一直停留在那里。

$('.main_carousel_bag').fadeOut(000).delay(4000).fadeIn(1500);  


$('.left_bag_action')
.animate({ left: '+=960', top:'-=400'}, 500)
.animate({ visibility: 'hidden'}, 0)
.delay(1000)
.animate({ visibility: 'visible'}, 0)
.animate({ left: '-=960'}, 1000)
.animate({ visibility: 'hidden'}, 0)
;

main_carousel_bag 是一个位于正确位置的 div，无论窗口大小如何。它会在 4 秒延迟后淡入。这是完美的工作。

left_bag_action 是一个 div，它从屏幕左侧（绝对定位）开始，然后执行请求的操作。这些动作完美无缺，但是我希望袋子消失，而另一个（right_bag_action）从另一个方向飞过屏幕。任何帮助是极大的赞赏！

谢谢！

Answer 1

您可以使用回调函数，这是动画完成时触发的代码

例如...

$('.main_carousel_bag').fadeOut(000).delay(4000).fadeIn(1500);  

$('.left_bag_action')
.animate({ left: '+=960', top:'-=400'}, 500)
.animate({ visibility: 'hidden'}, 0)
.delay(1000)
.animate({ visibility: 'visible'}, 0)
.animate({ left: '-=960'}, 1000)
.animate({ visibility: 'hidden'}, 0, function(){
    //.....Some code here for right_bag_action....//
})