Question

我需要fadeIn到fadeIn，同时它是动画（向上移动），fadeIn需要在动画的最后2秒内完成，就像它完成一样。 / p>

请注意，我不希望同时animate和fadeIn，div需要在动画中途发生$('header').delay(1000).fadeIn(1000) $('header').animate({ 'marginTop': '-=200px' }, 2000);向上移动

{{1}}

动画一个接一个地排队，我不能让它们中途工作。

Answer 1

我会运行两次动画功能，如下所示：

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

https://jsfiddle.net/o0w4vhb3/

Answer 2

要确定动画何时处于一半，您可以使用.animate() - 函数的步骤选项。

为每个动画的每个动画属性调用的函数元件。此函数提供修改Tween的机会 object在设置之前更改属性的值。

为了直接启动第二个动画（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 3

我将分两步完成，模仿.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在评论中有一个很好的观点，所以我把方法改为最直接的选择。这与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');

修改 - 如评论中所述，动画需要linear才能显得平滑。

Answer 4

您可以通过禁用第一个排队来同时运行两个动画：

$('.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 5

实测值!!!

PURE jQuery - fadeIn（）+ animate（）

如果你想使用display:none元素，那么仍然会得到两个效果只需使用jQuery或内联样式隐藏它。

要解决的问题：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

BONUS - 仅限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;   
}

玩得开心！

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

5 个答案: