Question

这是我的第一篇帖子，所以让我说你好！每个人;）

我有动画问题。我想达到这个效果：

显示文字“Lorem ipsum 1”，然后将其设为“不透明度：0”
run delay
当文本不可见时将文本更改为“Lorem ipsum 2”
使用动画显示文字'opacity：1'

但是我的代码在一开始就改变了文本。所以我甚至看不到“Lorem ipsum 1”。

我试图添加.stop（）和.queue（）代码，但也无法正常工作（或者我没有正确使用它。）

我会感谢您提供建议并解释为什么代码不是一步一步执行以及如何获取代码。

$(document).ready(function(){
  $('body').append('<p>Lorem ipsum 1</p>');

  $('p')
    .animate({opacity: '0'}, 'slow')
    .delay(1000)
    .text('Lorem ipsum 2')
    .animate({opacity: '1'}, 'slow');
  });

Answer 1

使用jquery animate回调，在第一个动画后执行以下动画。

$(document).ready(function(){
$('body').append('<p>Lorem ipsum 1</p>');

$('p')
    .animate({opacity: '0'}, 'slow', function(){
        $(this).text('Lorem ipsum 2')
        .animate({opacity: '1'}, 'slow');
    })        
});

Answer 2

之前我曾干涉过这个问题，我发现了一个与此问题相关的帖子： How to get jQuery to wait until an effect is finished?

你只需将括号放在动画部分后面即可。动画完成后，内部代码将被执行。这称为回调函数。

    $('p').animate({opacity: '0'}, 'slow', function() {
       //and here you put everything that should be executed after the animation
    });

我希望我没有弄乱任何东西。

jQuery的。动画前的文字更改。效果顺序不正确

2 个答案: