Javascript 淡入淡出和肯伯恩斯效果相同的图像

当我点击一个链接时，我需要将kenburn效果和淡入淡出效果放在同一张图片上

我试着按我的方式做，但效果并不理想

当我单击

box1

时，我需要淡入并刻录第一个图像，第二个图像也是如此

我为两个图像都添加了两次JavaScript。我需要它放在两个图像一次，但需要同时点击框1和框2的淡入淡出和kenburn每个图像

你能帮个忙吗

---

我认为您希望通过单击每个图像的相应框，在每个图像上应用该效果
您需要阅读
有太多的方法可以做到这一点，我认为这是最有效的方法：
1-获取框的索引
2-对具有相同索引的图像应用效果

这是一个

---

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

$（this）

代替用户选择淡入淡出量和ken burns，这是一种社交类型的东西，还是只是一种固定淡入淡出量和ken burns的样式功能？您的问题不是很有描述性。但是你的JS有一个问题，就是你不能逐渐添加一个类。因此，从

addClass（'zoom'）

函数中删除

，2000

$(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');

};