如何使用JS/jQuery.animate({影片元素從Last到First/ReverseAnimation的函式-有解無憂

我的查詢很簡單，

我有這個文本影片，它是來自我的 var 內容字串的所有字符的多元素組合。 

不，我使用此代碼為這條線設定影片：

var content = 'This is Example Line of Animation, This is Example Line of Animation,';

var ele = '<span>'   content.split('').join('</span><span>')   '</span>';

$(ele).hide().appendTo('p').each(function (i) {
    $(this).delay(40 * i).css({
        display: 'inline',
        opacity: 0,             
    }).animate({
        opacity: 1       
    }, 100);
});

#mainbg {
width: 500px;
height: 300px;
background: yellow;
 overflow: auto;
 font-size: 40px;
 font-family: Four C Gauri;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mainbg">
<p></p>
</div>

現在我的查詢是我想讓它反向影片，從最后一個元素到第一個元素。

我已經嘗試了一些這種做法，但沒有奏效：比如direction: 'reverse',等等 animation-direction: 'alternate',。

var content = 'This is Example Line of Animation, This is Example Line of Animation,';

var ele = '<span>'   content.split('').join('</span><span>')   '</span>';

$(ele).hide().appendTo('p').each(function (i) {
    $(this).delay(40 * i).css({
        display: 'inline',
        opacity: 0,             
    }).animate({
        opacity: 1,
         direction: 'reverse',
    }, 100);
});

雖然當我改變時Opacity : 1 to 0，結果是這樣的：

var content = 'This is Example Line of Animation, This is Example Line of Animation,';

var ele = '<span>'   content.split('').join('</span><span>')   '</span>';

$(ele).hide().appendTo('p').each(function (i) {
    $(this).delay(40 * i).css({
        display: 'inline',
        opacity: 1,             
    }).animate({
        opacity: 0       
    }, 100);
});

#mainbg {
width: 500px;
height: 300px;
background: yellow;
 overflow: auto;
 font-size: 40px;
 font-family: Four C Gauri;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mainbg">
<p></p>
</div>

這不是在反轉我的影片，我希望影片從 Last到 First Hopw 你理解在這張照片中看到的。就像反向打字消失效果一樣如何使用 JS / jQuery .animate({ 影片元素從 Last 到 First / Reverse Animation 的函式

請幫我看看我怎么能得到這個？

uj5u.com熱心網友回復：

您需要以相反的順序制作影片。首先你需要像這樣得到span里面所有元素的長度p

let _spanLength = $("p span").length;

然后在這之后你需要像這樣回圈影片

$("p span").eq(_spanLength - (i   1)).delay(40 * i).css({
    display: 'inline',
    opacity: 0,             
}).animate({
    opacity: 1       
}, 100);

這是作業演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/530306.html

標籤：javascripthtmljQuerycss动画

上一篇：如何使用Jquery獲取影像以將變數傳遞到下一頁

下一篇：如何僅將以下代碼段應用于移動設備