jquery創建簡單的圖像幻燈片動畫 - 淡入和淡出圖像

Question

我正在創建自定義圖像幻燈片，我不想使用一些插件。我想創建圖像轉換，只是簡單的淡出和下一個圖像淡入。該滑塊通過將圖像添加到父級中而起作用。

<div class="img-holder"> 
    <img src="/img/slide1.jpg" alt=""> 
</div> 

我有一個圖像列表，我用ajax獲取，並在導航點擊我追加下一個或prev圖像，而不是這一個。

簡單的例子是在jsfiddle

我怎樣才能像我追加的褪色？或者在它上面製作不同的動畫，但如果我嘗試中間，但初始淡入。

Answer 1

你可以換出圖像的src而不是刪除/附加，然後只是淡化它回來？

所以...... - 淡出圖像 - 換出SRC - 淡入圖像

如果你把自己的功能的影響，你可以只換出來。

我已經更新了你的提琴：

http://jsfiddle.net/YX9Km/7/

/* var effectBefore = function(el, speed, callback) { 
    el.animate({ opacity: 0}, speed, callback); 
}; 

var effectAfter = function(el, speed) { 
    el.animate({ opacity: 1}, speed); 
}; */ 

var effectBefore = function(el, speed, callback) { 
    el.animate({ height: 0 }, speed, callback); 
}; 

var effectAfter = function(el, speed) { 
    el.animate({ height: 100 }, speed); 
}; 

$('.next-img').click(function(){ 
    var imgEl = $(".img-holder img"); 
    effectBefore(imgEl, 400, function() { 
     imgEl.attr('src', 'http://www.online-image-editor.com/styles/2013/images/example_image.png'); 
     effectAfter(imgEl, 400); 
    }); 
});