0

所以，我对此完全陌生，并试图产生一种旧地址闪烁几次的效果，然后用一些新文本替换它。但是，在我使用 .replaceWith() 的那一刻，它会覆盖所有其他 .fade 和 .append 调用。

    <div id="footer-address">
<strong>Address</strong>&nbsp;&nbsp; Old Address</div>

    <script>
    $( document ).ready(function() {
      $( "#footer-address" ).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).replaceWith("We have moved! Our new address is").fadeOut(400).append("<strong>Address</strong>  New Address");
    });
    </script>

我很感激你把我的脑袋撞到一边，并提供了正确的方法来做这样的事情。

谢谢。

4

3 回答 3

1

replaceWith与动画函数不同，动画函数是一个接一个地排队执行。

您可以使用queue将非动画函数添加到动画队列：

$( "#footer-address" )
    .fadeOut(400)
    .fadeIn(400)
    .fadeOut(400)
    .queue(function(){
         $( "#footer-address" ).empty().append("We have moved! Our new address is");
         $(this).dequeue();
     })
    .fadeOut(400)
    .queue(function(){
         $( "#footer-address" ).append("<strong>Address</strong>  New Address");
         $(this).dequeue();
     })

不要忘记dequeue指示“动画”已经完成并且应该开始下一个的调用。

原建议：

您可以使用回调函数在替换元素之前等待动画完成：

$( "#footer-address" ).fadeOut(400).fadeIn(400).fadeOut(400, function(){
    $( "#footer-address" ).replaceWith("We have moved! Our new address is").fadeOut(400,      function(){
        $( "#footer-address" ).append("<strong>Address</strong>  New Address");
    })
});
于 2013-02-21T22:14:15.150 回答
0

您还可以使用 CSS3 动画（来自此答案）：

#footer-address.blink {
    animation:         blink 300ms linear infinite;
    -moz-animation:    blink 300ms linear infinite; 
    -webkit-animation: blink 300ms linear infinite; 
}

@keyframes         blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes    blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
@-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }

确保#footer-address元素具有 .blink 类开始，然后在一定时间后，使用 js 将其删除。

setTimeout(function() {
    $('#footer-address').removeClass('blink').text('We have moved! Our new address is...');
}, 4000);
于 2013-02-21T22:13:33.603 回答
0

你实际上有几个问题。

  1. 您的调用replaceWith是替换 div，而不是更改其中的 HTML，因此一旦触发，#footer-address就不再存在。
  2. 如前所述，并非所有函数都以相同的方式排队。

一个应该工作的例子（调整数字以获得你喜欢的效果）：

$("#footer-address").fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);

setTimeout(function() {
  $("#footer-address").html("We have moved! Our new address is").fadeOut(400);
}, 4400);

setTimeout(function() {
  $("#footer-address").html("<strong>Address</strong>  New Address").fadeIn(400);
}, 4800);

演示在http://jsbin.com/uguhug/1/edit

于 2013-02-21T22:30:37.663 回答