Question

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

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

我有一个用ajax获取的图像列表，在导航上点击我附加下一个或上一个图像而不是这个。

简单示例位于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);
    });
});

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

1 个答案: