Javascript JQuery addClass不透明函数通过图像淡入-解决问题

此函数使用JQuery和UI使图像在库中彼此淡入淡出。我得到了非常奇怪的结果。在我们的网站上，这些图像似乎没有正确地定时，并且看起来会不可避免地褪色

不管怎样，我做了一把小提琴

这把小提琴根本不起作用，也就是说，据我所知，它拥有所需的全部资源，但什么也没有发生

有人能解小提琴吗
-图像应该通过彼此平滑地淡出，从而产生可爱的过渡效果

有什么想法吗

奇妙的

更新-实现目标，但仍不完全实现

观看最后一张幻灯片和第一张幻灯片之间的过渡。它是静态的，不会消失

单击缩略图时，需要执行该功能并重置计时器

有什么想法吗？

这里：

纠正了一些错误：

• 不需要通过更改类来设置不透明度，只需使用

  hide

  /

  fadeIn

  /

  fadeOut

• 请记住使用全局变量

  clearTimeout

  ，否则计时器将覆盖实际单击

• first（）

  在这种情况下不起作用，只需调用

  '.thumbs.first'

• 必须重新设置循环结束的条件（检查下一个元素是否没有类

  thumb

  ）

• fadeOut

  仅显示当前照片

最终代码：

$(".cornerimg").hide(); // Hide all images
var slideShowTO, slide; // Global vars

$('.thumbs').click(function() {
    if (slide) $('#P' + slide).fadeOut(2000);
    slide = $(this).attr('id');
    $('#P' + slide).fadeIn(2000);
    clearTimeout(slideShowTO);
    slideShowTO = setTimeout(function() {
        var next = $('#' + slide).next();
        if (next.hasClass('thumbs'))
            next.click();
        else
            $('.thumbs:first').click();

    }, 4000);

});
$('.thumbs:first').click();

---

根据我的经验，使用jQuery'UIs addClass（）和switchClass（）制作动画并不能跨浏览器工作。Firefox中存在着从安静到完全不透明的问题，而且它在IE9以下的任何环境中都不起作用，因为它们不支持过滤器（仅限标量值）。简而言之，它似乎没有与animate（）函数共享相同的支持。因此，如果您想使用CSS，我建议您使用CSS3转换和as回退-此插件并不完美，因为您需要指定要从类中“提取”的特定规则，但它可能会有帮助

非常好，但有几点。它必须通过添加类来实现，就像在启用的浏览器上通过CSS转换来实现一样。我放了一把小提琴，它几乎能满足我的需要。。。。2个问题。第一，观察图片3和图片1之间的过渡。这根本不对。第二，缩略图上的单击功能没有任何作用。它需要重置计时器。@Robin Knight你的意思是当你点击任何图像时，你需要停止幻灯片放映？