javascript - 淡入淡出和 Kenburns 效果到同一图像

Question

当我单击链接时，我需要将 kenburn 效果和淡入淡出效果都放在同一张图像上。

我试图按照我的方式去做，但它并不完美。

单击 时，我需要对第一张图像进行淡化和 kenburn 处理box1，第二张图像也是如此。

我为这两个图像放置了两次 JavaScript。我需要为两个图像放置一次，但需要同时单击 box1 和 box2 以淡化和 kenburn 每个图像。

你能帮忙吗？

这是我的工作。演示

$(document).ready(function () {
    $('.box1').on('click', function () {
        $('#slideimg01').addClass('zoom'),2000;
    });
});

$(".box1").bind("click", function(e){
    e.preventDefault();
    gogo();
});

var gogo = function(){


$("#slideimg1 img").clone().appendTo("#slideimg1").hide().css({ position: 'absolute', top: 0, left: 0 });
$("#slideimg1 img:first").fadeOut(1000,'linear');
$("#slideimg1 img:last").fadeIn(1000,'linear');

};

Answer 1

我认为您想通过单击
您需要$(this), eq(), index()在http://api.jquery.com/
中阅读的相应框来对每个图像应用该效果， 有太多方法可以做到这一点，我认为这是有效的一：
1-获取框的索引
2-对具有相同索引的图像应用效果

这是一个演示

请记住，您不必为每个框复制相同的 jquery 代码，您可以$(this)使用