jQuery 淡入和淡出在 Google Chrome 中无法正常工作

Posted 2023-02-22

【中文标题】jQuery 淡入和淡出在 Google Chrome 中无法正常工作

【英文标题】：jQuery fadein and out is not working properly in Google Chrome

【发布时间】：2012-03-09 06:37:55

【问题描述】：

我在使用 jQuery 制作的简单幻灯片时遇到问题。 该脚本在除 Google Chrome 之外的所有其他浏览器中都能正常工作。你可以找到直播网站here

这有两点不妥：

幻灯片自动启动，但在第二张幻灯片后停止。 如果您单击幻灯片指示器 (....)，有时会显示该幻灯片的背景图像（通过 CSS 应用），有时会保持隐藏状态。

最重要的是，我得到了这个错误：

event.layerX 和 event.layerY 在 WebKit 中被破坏和弃用。它们将在不久的将来从引擎中移除。

这是我正在使用的 javascript：

function nextSlide() 
    var visibleSlide = $('#slider li:visible');
    var currentSlide = $(visibleSlide).index() + 1;
    var slideCount = $('#slider li').size();
    var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

    $('#slider_indicator a').removeClass('active');
    $(visibleSlide).fadeOut('fast', function() 
        $('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');
        $('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');
    );


autoslide = setTimeout("nextSlide()", 6000);

$(function() 
    $('#slider_indicator a').bind('click', function(e) 
        clearTimeout(autoslide);
        $('#slider_indicator a').removeClass('active');
        $(this).addClass('active');
        var slide_number = $(this).parent().index() + 1;
        $('#slider li:visible').fadeOut('fast', function() 
            $('#slider li:nth-child(' + slide_number + ')').fadeIn('fast');
        );
        e.preventDefault();
    )
    $('#selection .scrollable .items a').live('click', function(e) 
        var self = $(this);
        $.ajax(
            url: $(self).attr('href'),
            type: 'GET',
            success: function(body) 
                var count = $('#selection .scrollable .items a').length - 1;
                count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';
                $(self).parent('li').fadeOut('fast', function() 
                    $('#result li a[rel="' + $(self).attr('rel') + '"]').removeClass('added');
                    $(this).remove();
                    $('#selection #header #count').text(count);
                )
            
        )
        e.preventDefault();
    )
)​

非常感谢任何帮助。

【问题讨论】：

它也停在firefox 10.0.1

对于控制台 event.layerX 中的错误...使用最新版本的 jquery 或查看***.com/questions/7825448/…

使用setInterval，setTimeout不会继续。

这个***.com/questions/316278/timeout-jquery-effects 可能对你有所帮助

它正在工作，清除你的缓存。

【参考方案1】：

没有jQuery经验，但我认为你的问题出现在这一行：

$('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');

应该是：

$('#slider li:nth-child(" + nextSlide + ")').fadeIn('fast');

虽然可能只是我的电脑，但我没有发现问题。

【参考方案2】：

正如我在评论中回答的那样，现在可以使用，但在单击事件中它不起作用，因此您可以简单地使用

$('#slider_indicator a').bind('click', function(e)
    clearInterval(autoslide);
    autoslide=setInterval("nextslide", 6000);
);

但要设置当前索引，您可以使用 nextslide 变量。

【参考方案3】：

我正在尝试找出问题所在以及为什么它不起作用但是：

var currentSlide = $(visibleSlide).index() + 1;

你不需要在 jQuery 中包装 visibleSlide，因为它已经是一个 jQuery 对象。

slideCount = $('#slider li').size();

通常在这种情况下使用length 而不是size()。

var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

没有尝试过，它可能会起作用，但我认为这可能不是一个很好的解决方案。

$('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');

看起来很奇怪，是缺少引号还是空格太多，不知道，看起来好像行不通，但我可能错了。也许这就是您的问题所在。

autoslide = setTimeout("nextSlide()", 6000);

我想你在那儿错过了val。

$('#selection .scrollable .items a').live('click', function (e)

您需要所有这些选择器吗？另外，我认为live() 已被弃用，而支持on()。

var count = $('#selection .scrollable .items a').length - 1;
count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';

这只是给我同样的感觉，它有时可能会起作用。我不明白你为什么定义 count 然后用奇怪的三元运算覆盖它。我觉得可能有更好的方法来做到这一点。

【参考方案4】：

我没有看到你在任何地方声明 var autoslide。

我认为你想要setInterval，而不是setTimeout

【讨论】：

变量自动滑动在它的全局范围内。