jquery创建简单图像幻灯片动画-淡入淡出图像

我正在创建一个自定义图像幻灯片，我不想使用一些插件。我想创建图像过渡，只是简单的淡出和下一个图像淡入。滑块只是通过在父对象中附加图像来工作

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

我有一个用ajax获取的图像列表，在nav上单击我附加next或prev图像，而不是这个

简单的例子是

---

如何在附加的图像中淡入淡出？或者，如果我选择mid，但主要淡入，则在其上制作不同的动画。

你能交换掉图像src而不是删除/附加，然后淡入吗

所以。。。 -淡出图像 -调出src -淡入图像

如果你把效果放在它们自己的函数中，你可以把它们换掉

我更新了你的小提琴：

/* 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);
    });
});