如何在 div 动画时中途运行淡入淡出效果？（向上移动）

Question

我想要一个 div 到 fadeIn，而它正在制作动画（向上移动），而 fadeIn 需要在动画完成时的最后 2 秒内出现。

请注意，我不希望它同时出现在 fadeIn 和 animate 上，fadeIn 需要在动画中途出现，因为 div 向上移动。

    $('header').delay(1000).fadeIn(1000)

$('header').animate({ 
    'marginTop': '-=200px'
}, 2000);

动画只是一个接一个地排队，我无法让它们工作到一半。

Answer 1

要确定动画何时播放到一半，可以使用.animate()-function 的 step-option。

为每个动画的每个动画属性调用的函数 元素。此功能提供了修改 Tween 的机会 对象在设置之前更改属性的值。

为了直接启动第二个动画（fadeIn），您必须手动将动画的queue-选项指定为false或dequeue不同的动画。

var marginTop = 200;
var flag = false;
$('header').animate({
    'marginTop': '-=' + marginTop  + 'px'
}, {
    queue: false,
    duration: 2000,
    step: function(now){
        if(now <= marginTop/2 && !flag){
            $(this).fadeIn();
            flag = true;
        }
    }
});

Demo

阅读有关 jQUery 动画队列的更多信息here

Answer 2

我会运行一个动画函数两次，如下所示：

$('#header').animate({
    'marginTop': '-=100px'
}, 1000, function(){ 
    $('#header').animate({
        'marginTop': '-=100px',
        'opacity': 1
    }, 1000)
});

https://jsfiddle.net/o0w4vhb3/

Answer 3

您可以通过禁用第一个动画的队列来同时运行两个动画，如下所示：

$('.header').css('opacity', 0);
$('.header').show();

$('.header').animate({ 'marginTop': '-=200px' }, {queue: false, duration: 2000});
$('.header').animate({opacity: 1}, 3000 );

.header {
    background-color: red;
    padding: 20px;
    display: none;
    margin-top: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header">test</div>

根据需要调整持续时间。

参考：How do you fadeIn and animate at the same time?

Answer 4

找到了！！！

纯 jQuery -fadeIn() + animate()

如果你想使用display:none 元素并且仍然获得这两种效果，那么 只需使用jQuery 或内联样式将其隐藏即可。

要解决的问题：

• .animate() 无法为 display 属性设置动画 - 所以我们使用 fadeIn。
• .animate() 被添加到动画队列中——所以我们设置了queue: false。

$('div').hide();
$('div').fadeIn(3000).animate({ 'marginTop': '-=200px' }, { queue: false, duration: 2000 });

div { margin-top:200px; background-color:blue; height:50px; width:500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

奖励 - 仅 CSS：

使用opacity 并延迟动画：

CSS：jsFiddle Demo

#ifade  { 
   margin-top:50px; 
   opacity:0;
   -moz-transition : margin-top 2s linear 0s, opacity 1s linear .6s;   
    -webkit-transition : margin-top 2s linear 0s, opacity 1s linear .6s;   
     transition : margin-top 2s linear 0s, opacity 1s linear .6s;   
}

玩得开心！

Answer 5

我将分两步完成，模仿 .fadeIn() 所做的：

http://codepen.io/anon/pen/wavmBw?editors=011

header {
opacity: 0;
}

$('header')
.animate({marginTop: '-=100'}, 1000, 'linear')
.animate({marginTop: '-=100', opacity: 1}, 1000, 'linear');

编辑 - @empiric 在 cmets 中有一个很好的观点，所以我将方法更改为最直接的选项。这与fadeIn() 的结果相同（但似乎不是很有必要）：

http://codepen.io/anon/pen/wavmBw?editors=011

var header = $('header');

header.css({display: 'none', opacity: 0});

// other stuff may be going on first

header
.css('display', 'block')
.animate({marginTop: '-=100'}, 1000, 'linear')
.animate({marginTop: '-=100', opacity: 1}, 1000, 'linear');

编辑 - 如 cmets 中所述，动画需要为 linear 才能显得流畅。