Question

使用此代码，相关图像不会同时生成de FadeIn效果和动画。它很快就会消失，当它完成时，它会应用动画。我需要他们在同一时间完成：

$('.b4').fadeIn(2000);
$('.b4').animate({'right': '400px'}, 5000);

我尝试过的其他选项没有效果：

$('.b4').fadeIn(2000).animate({'right': '400px'}, 5000);
$('.b4').animate({'right': '400px'}, 5000).fadeIn(2000);

Answer 1

尝试使用queue这样的fadein：http://jsfiddle.net/h4e4cb80/

$('.b4').fadeIn({queue: false, duration: 2000});
$('.b4').animate({'right': '400px'}, 5000);

队列：一个布尔值，指示是否将动画放置在效果队列中。如果为false，则动画将立即开始

http://api.jquery.com/fadein/

Answer 2

尝试在动画中使用opacity：

$('.b4').animate({'right': '400px', opacity: 1}, 5000);

编辑：这只有在您想要同时使用动画时才有效，所以这可能不适合您。

Answer 3

尝试两个动画而不排队

$(function () {
    $(".b4").animate({
       display: 'block'
    }, { duration: 2000, queue: false });
    $(".b4").animate({
      right: '400px'
    }, { duration: 5000, queue: false });
});

或不透明度：

$(function () {
    $(".b4").animate({
       opacity: "1"
    }, { duration: 2000, queue: false });
    $(".b4").animate({
      right: '400px'
    }, { duration: 5000, queue: false });
});

同时应用.fadeIn（）和.animate（）

3 个答案: