0

这是我的第一篇文章，所以让我打个招呼吧！每个人 ;）

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

  1. 显示文本“Lorem ipsum 1”，然后将其设置为“不透明度：0”
  2. 运行延迟
  3. 不可见时将文本更改为“Lorem ipsum 2”
  4. 使用动画显示文本到“不透明度：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');
  });
4

2 回答 2

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');
    })        
});
于 2013-06-11T11:32:23.097 回答
0

我之前插手过这个问题，我发现了一个与这个问题相关的帖子： How to get jQuery to wait until an effect is done?

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

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

我希望我没有搞砸任何事情。

于 2013-06-11T11:38:44.647 回答