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

<强> Sample

或更好的动画不透明度;

 $(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调用。

消退后的Div会在延迟后滑落

4 个答案: