jQuery img src動畫與淡入淡出

我試圖創建一個動畫，使用淡入/淡出動畫每4.6秒更改img元素的圖像源。jQuery img src動畫與淡入淡出

這裏是我的代碼：

var cng = false; 
 
function change(){ 
 
    var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg', 
 
       'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg']; 
 
    $('img').fadeOut("slow", function(){ 
 
    $(this).attr('src', cng ? imgs[0] : imgs[1]); 
 
    $(this).fadeIn("slow", change()); 
 
    cng = !cng; 
 
    }); 
 
} 
 
$(document).ready(function(){setInterval('change()', 4600);});

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

 
<img src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

正如你所看到的（點擊運行段，等待紅色形象出現，並等待其他4秒），這不是預期的結果但我不知道如何修復它...

你能幫我嗎？

來源

2017-03-14 Cristian

以下內容應該可以解決您的問題，我已經擴展了支持無限期圖像陣列的功能，所以您不僅僅限於擁有兩個圖像。我也用自己的函數將兩個外部變量包含在數組中，另一個是基於0索引數組的動畫的起點。

$().ready({ 
 
var currentImageIndex = 0 
 
var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg', 
 
       'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg'] 
 
function changeImage() { 
 
if (currentImageIndex > (imgs.length-1)){ 
 
currentImageIndex = 0 
 
} 
 
$('#imgAnimation').fadeOut(1000,function(){ 
 
$('#imgAnimation').attr('src',imgs[currentImageIndex]).fadeIn(1000); 
 
currentImageIndex++ 
 
}) 
 
setTimeout(changeImage, 4600); 
 
} 
 
changeImage(); 
 
});

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

 
<img id="imgAnimation" src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

要打破代碼首先我們定義函數changeImage，其首要任務是驗證我們的櫃檯沒有通過我們的數組的結尾，所以我們比較計數器陣列長度因爲長度減1將返回一個計數而不是最大索引，如果計數器已經通過最大索引，我們將計數器重置爲0，這是我們數組中的第一個索引。然後，我們開始動畫步驟，以確保我們只擊中目標，並且包含圖像的ID參考。首先我們淡出並使用完成函數調用，然後將圖像的src屬性設置爲數組中的下一個值，然後調用淡入功能。現在我們給計數器添加一個，然後調用timeout函數，讓它在指定的延遲後再次調用我們的函數。

如果你需要擴展這個，你可以讓多個數組和多個目標成爲可能，並通過稍微改變函數分別執行其動畫，如果你想讓我覆蓋這個，然後讓我知道，我會發布我的解決方案中的其他代碼

由於代碼不似乎跑這裏來檢查以下小提琴 https://jsfiddle.net/p1k71nns/ 如果你想防止起始褪色，那麼你可以刪除src屬性的HTML標記，只是添加樣式屬性具有高度和寬度，以保證該空間爲您的動畫保留。

來源

2017-03-14 16:39:39 IDED

一旦完成了fadeIn，您只需刪除回調即可進行更改。

BEFORE：

$(this).fadeIn("slow", change());

AFTER：

$(this).fadeIn("slow");

由於您使用的setInterval，改變功能就已經被每4.6秒調用。

來源

2017-03-14 15:55:26 Emeline

jQuery img src動畫與淡入淡出

回答

相關問題