使用jQuery在文本中淡出字符

在下面的代碼中，我有一行文字「A B C」，我想逐個淡出字符，即首先淡出C，然後B，最後A淡出。代碼有效，但我認爲我的解決方案非常複雜。如果文本有更多的字母，那麼代碼必須擴展爲每個字母回調後回調...使用jQuery在文本中淡出字符

這可以解決一個更加整潔的方式？可以將fadeOut按順序放置而不是嵌套回調？

我的最終目標是通過人物淡出文本字符，然後在一個新的文本，逐個字符褪色......就像一個PowerPoint動畫:)

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#C").fadeOut(300, function() { 
 
     $("#B").fadeOut(300, function() { 
 
     $("#A").fadeOut(300); 
 
     }); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button>Click to fade out character by character</button><br><br> 
 

 
    <div> 
 
    <span id="A">A</span> 
 
    <span id="B">B</span> 
 
    <span id="C">C</span> 
 
    </div>

來源

2017-07-07 Gowire

，你將有ABC內部DIV分別在上面的代碼或剛上線ABC – Chetan

不，沒有必要...這是更可能是我想要一行文字，例如：'

Unfaded text A B C

' – Gowire

在這裏，你去了一個解決方案https://jsfiddle.net/d0326z9m/

$("button").click(function() { 
    var child = $('div').children(); 

    var i = child.length; 
    setInterval(function() { 
     $('#' + $(child[i-1]).attr('id')).fadeOut(); 
     i--; 
     if(i < 0){ 
      window.clearInterval(); 
     } 
    }, 300); 
});

在此方案中，並沒有多麼可你有孩子在一個div裏面它會表現完美。

來源

2017-07-07 10:13:39 Shiladitya

您可以先選擇以相反的順序span的，然後

$('button').click(function() { 
 
    $($("span").get().reverse()).each(function(i) { 
 
    $(this).delay(400 * i).fadeOut(300) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click to fade out character by character</button><br><br> 
 

 
<div> 
 
    <span id="A">A</span> 
 
    <span id="B">B</span> 
 
    <span id="C">C</span> 
 
</div>

來源

2017-07-07 10:15:17

我瘋了解決方案，您使用each環和內使用delay用（time * index）不必在dom內部寫入每個字符，而只需鍵入字符串並按相反順序淡出每個字符

<div class="text">Phone is great</div>

Javscript代碼：

var queue = []; 
var input = $(".text").text(); 
for (var i = 0; i < input.length; i++) { 

    queue.push("<span class='charToFade'>" + input.charAt(i) + "</span>"); 

} 
$(".text").text(""); 
while(queue.length>0) 
{ 
    $(".text").append(queue.shift()); 
} 

$($("span").get().reverse()).each(function(i) { 
    $(this).delay(400 * i).fadeOut(300) 
})

見jsfiddle link

來源

2017-07-07 11:31:15 Chetan

使用jQuery在文本中淡出字符

回答

相關問題