JQuery 文本淡入淡出

Question

我愿意

替换“.”中的单词至 "first"
1 秒后，将单词从 "first" 替换为 "second"
1 秒后，将单词从 "second" 替换为 "first"
1 秒后，将单词从 "first" 替换为 "second"
1 秒后，将单词从 "second" 替换为 "first"
反复循环

但是我的代码并没有像我预期的那样工作。 - 相反，它将另一个词附加到前一个词。

你能建议我如何解决这个问题吗？谢谢你。 http://codepen.io/anon/pen/OyWpQq

    <h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> 
<span class="details"><a href="#"><span class="detailsText">.</span></a></span> 
 <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>

.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}

.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}

.type{display:none;}
.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
.CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}  

   showFirst();

   function showFirst() {

     $('<span/>').html("first").appendTo($(".detailsText"));
     $(".detailsText").fadeIn(500).delay(1000).fadeOut(500,showSecond);

   }

   function showSecond() {

     $('<span/>').html("second ").appendTo($(".detailsText"));
     $(".detailsText").fadeIn(500).delay(3000).fadeOut(500);

     showFirst();
   }

Answer 1

appendTo 仅将 html 附加到您现有的 html，因此您总是添加一个词。使用 html 函数替换您之前的单词。第二个问题是，你必须在你的第二个方法中将你的 showFirst 方法设置为 fadeOut 的回调（与函数 showFirst 和 show Second 中的一样），因为 showFirst 的执行应该在淡出之后。第三，如果你做一个 500 毫秒的 fadeIn 和一个 500 毫秒的 fadeOut，你的动画持续时间是一秒（1000 毫秒），你不需要更多的延迟。

修改您的代码如下：

   showFirst();

   function showFirst() {
     //Replace the hole html
     $('.detailsText').html("first");
     $(".detailsText").fadeIn(500).delay(0).fadeOut(500,showSecond);

   }

   function showSecond() {
     //Replace the hole html
     $('.detailsText').html("second");
     $(".detailsText").fadeIn(500).delay(0).fadeOut(500,showFirst);

   }

希望这能解决您的问题。这是代码笔：http://codepen.io/anon/pen/BopWqg

该代码在每个文本之间给出 1 秒。如果你想要，不透明度中的1秒这个词：1，那么你可以在你的delay(1000).

中增加更多的毫秒

Answer 2

您需要阅读函数 .appendTo()。

"We can create content and insert it into several elements at once".表示内容还在

你也可以看到the demo，点击按钮即可。

Answer 3

您是在附加文本而不是替换文本。我可以想出一个最小的解决方案，如下所示

$(document).ready(function() {
    var counterText = ["First", "Second", "Third"];
    var counter = 0;    
    setInterval(change, 1000);
    function change() {
        $('.detailsText').html(counterText[counter]);
        counter++;
        if(counter >= counterText.length) { 
          counter = 0; 
        }
    }  
})

 
.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}

.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}

.type{display:none;}
.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
.CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> <span class="details"><a href="#"><span class="detailsText">.</span></a></span> <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>

检查这个 http://codepen.io/anon/pen/zvNZMz

JQuery 文本淡入淡出

JQuery text fade in fade out

jquery

fadein

fadeout

cycle