javascript - 淡入然后延迟后滑动的div

Question

我目前有一个 div 淡入然后延迟后滑动。我需要在延迟后同时发生淡入淡出和滑动。有谁知道这是否可能？这是我目前拥有的：

<script type="text/javascript">
$(document).ready(function(){
    $('#image1').hide();
    $('#image1').delay(2500).fadeIn('3000');
    $('#image1').animate({'margin-top': '150px'}, 1000);
});   
</script>

Answer 1

fadeIn()基本上将不透明度从 0 设置为 1，因此只需在您的animate()函数中执行此操作，或使用queue()函数制作自定义动画队列：

$(document).ready(function(){
    $('#image1').hide()
                .delay(2500) 
                .animate({
                      opacity  : 1, 
                      marginTop: '150px'
                }, 1000);
});   

Answer 2

<script type="text/javascript">
    $(document).ready(function(){
        $('#image1').hide();
        $('#image1').delay(2500).animate({marginTop: '150px', opacity: 1}, 1000);
    });   
</script>

Answer 3

看到这个：

 $(document).ready(function(){
   $('#image1').hide().delay(2500).queue(function(next) {
      $(this).fadeIn({duration:3000, queue:false}).animate({'margin-top':  '150px'}, {duration:3000, queue:false});
   });
});

样本

或者更好的动画不透明度；

 $(document).ready(function(){
    $('#image1').hide().delay(2500).animate({marginTop: '150px', opacity: 1}, 1000);
 });

Answer 4

如果您使用slideDown，则不需要fadeIn调用。那么怎么样：

$(document).ready(function(){
    $('#image1').hide(); // If you start off with CSS hidden styles, this is not needed.
    $('#image1').delay(2500).slideDown(3000);
});

animate请注意，如果您在样式表中设置了适当的边距，您也不需要调用。