显示文本一会儿

http://jsfiddle.net/639RF/显示文本一会儿

$("button").click(function() { 
    //#t holds 'X' 
    $('#t').fadeOut(1000).text('ZZ').fadeIn(1000); 
    $('#t').delay(1000); 
    $('#t').fadeOut(1000).text('YY').fadeIn(1000); 
});

我试图表现出了一阵一些文字，然后用一些其他的文本替换它。我试图这样做的方式忽略了我想要显示的第一个文本，并将其从最开始的文本替换为最后一个文本。

它应该：

淡出 'X' 出来，淡出 'ZZ' 中，搁置了第二淡出 'ZZ' 出来，淡入 'YY'

来源

2014-03-26 Adriano

每次请致电$("#t")，您正在创建一个新的jQuery对象。该对象可能具有相同的元素，但它仍然是具有不同属性的不同对象。

试试这个：再次

var t = $("#t"); 
t.fadeOut(1000,function() {t.text("ZZ")}).fadeIn(1000); 
t.delay(1000); 
t.fadeOut(1000,function() {t.text("YY")}).fadeIn(1000);

编辑：Figured it out!您需要使用动画回调来处理事情，是不正常的动画队列的一部分。

来源

2014-03-26 13:54:07

呀，'文本（）'不会尊重'延迟（）'，它仅适用于动画。 – isherwood

是的，也一样。 html（）也是如此。 – Adriano

请参阅编辑。我现在很高兴！仍然不会用一个50英尺的杆子碰jQuery，但这次我有一个100英尺的杆子，所以没关系。 –

您可以使用回调作为第二个参数fadeOut和FadeIn，也可以等待一秒，也可以使用原始的setInterval方法。

$(document).ready(function() { 
    $("button").click(function() { 
     var $dom = $('#t'); 

     $dom.fadeOut(1000, function(){ //first, fades out. 
      $dom.text('ZZ').fadeIn(1000,function(){ //changes the text to ZZ, 

       var $wait = setInterval(function(){ //wait for a second 
        clearInterval($wait); //prevent the loop of waiting 

        $dom.fadeOut(1000,function(){ //fadeout for a second 
         $dom.text('YY').fadeIn(1000); //change the text into YY, and fade in 
        }); 

       },1000); 

      }); 
     }); 
    }); 
});

JSFiddle: http://jsfiddle.net/639RF/3/

来源

2014-03-26 14:03:28 Arda

这个怎么样？

注意：随意更改持续时间，只要你喜欢。

演示：JSFiddle

$(document).ready(function() { 
    $("button").click(function() { 
     $('#t').fadeOut(500, function(){ //fadeout in half a second and when complete 
      //fadein in half a second, wait for 2 seconds, when complete 
      $(this).text('ZZ').fadeIn(500).delay(2000).fadeOut(500, function(){ 
       //fadein in half a second 
       $(this).text('YY').fadeIn(500) 
      }); 
     }); 
    }); 
});

来源

2014-03-26 14:05:25 lshettyl

显示文本一会儿

回答

相关问题