图片应用淡入淡出和肯伯恩效果

Question

当我点击链接时，我需要将Kenburn效果和淡出效果应用于同一图像。

我尝试了自己的方法，但它并没有完美地工作。

当我点击box1时，我需要淡化并Kenburn第一张图片，第二张图片也是如此。

我为两个图像分别放置了JavaScript。我需要将其放置一次，并且需要单击box1和box2以淡出和Kenburn每个图像。

请帮忙解决这个问题吗？

这是我的作品。DEMO

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

};

- user2607456

---

这是一个社交类型的功能，用户可以选择淡入淡出和肯·伯恩斯效果的数量，还是只是具有固定淡入淡出和肯·伯恩斯效果的样式特性？ - samrap

你的问题描述不够清晰。但是你的JS有问题，就是不能逐渐添加类。所以从addClass('zoom')函数中删除,2000即可。 - Cody Guldner

Answer 1

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

这是一个演示

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

- amine dimaana