Question

我想

从“。”替换单词。到“第一”
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

您正在附加文字而非替换它。我可以找到一个最小的解决方案，如下面

$(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

Answer 2

WITH CTE1 AS ( SELECT 1 AS [NO] UNION ALL SELECT [NO]+1 FROM CTE1 WHERE [NO]<10 ), CTE2 AS ( SELECT ROW_NUMBER() OVER (ORDER BY (SELECT NULL)) AS RN, A,B FROM YOURTABLE ) SELECT C1.[NO],A,B FROM CTE1 C1 LEFT JOIN CTE2 C2 ON C1.[NO] = C2.RN只将html附加到您现有的html中，因此您总是添加一个单词。使用appendTo功能替换您之前的单词。第二个问题是，你必须在你的第二个方法中将html方法设置为showFirst的回调（与函数showFirst中的show second相同），因为fadeOut的执行应该在完成淡出后 第三种，如果你做一个500毫升的showFirst和500毫升的fadeIn，你的动画持续时间是一秒（1000毫秒），你不需要更多的延迟。

修改您的代码如下：

fadeOut

我希望，这可以解决你的问题。这是codepen：http://codepen.io/anon/pen/BopWqg

该代码在每个文本之间给出1秒。如果需要，不透明度中的单词1秒：1，那么您可以向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); }添加更多毫秒。

Answer 3

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

"We can create content and insert it into several elements at once"。这意味着内容仍在那里。

您还可以看到the demo，只需点击按钮即可。

JQuery文本淡出淡出

3 个答案: