Question

此功能使用JQuery和UI在图库中相互淡化图像。我的结果很奇怪。在我们的网站上，似乎图像没有正确计时，并且看似不稳定地消失。

无论如何，我建立了一个小提琴http://jsfiddle.net/TGgc5/17/

这个小提琴根本不起作用，即。没有任何反应，只要我能看到它拥有所需的所有资源。

任何人都可以解决这个问题 - 图像应该平滑地相互褪色，创造出可爱的过渡效果。

有什么想法吗？

非凡

更新 - 到达那里但仍然不完全 http://jsfiddle.net/TGgc5/39/

观看最后一张幻灯片和第一张幻灯片之间的转换。它是静态的，不会消失。
单击缩略图时，需要执行该功能并重置计时器。

有什么想法吗？

Answer 1

此处：http://jsfiddle.net/7QrbE/

纠正了一些错误：

无需通过更改班级来设置不透明度，只需使用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();

Answer 2

使用jQuery＆＃39;用于动画的UI addClass（）和switchClass（）在我的经验中并不真正适用于跨浏览器。 Firefox中的问题并没有变得完全不透明，并且它不能在IE 9以下工作，因为它们不支持过滤器（仅限标量值）。简而言之，它似乎与animate（）函数共享相同的支持。因此，如果你想使用CSS，我建议你使用CSS3过渡和jQuery animateToSelect plugin作为后备 - 这个插件并不完美，因为你需要指定你想要的特定规则＆＃34;提取＆＃34 ;从你的班级，但它可能会有所帮助

JQuery addClass不透明度函数淡入图像 - 解决小提琴

2 个答案: