2

我对 jQuery 真的很陌生，但我已经阅读教程一周了，这是我的第一个代码。它可以工作，但是一段时间后它开始表现不佳。特别是当连续多次调用 mouseenter/mouseleave 操作时。每次延迟都会增加，直到我移动到另一个元素。

我在 jQuery 中搜索过糟糕的性能，但没有运气。我发现的最好的提示是：“使用 ID 而不是类选择器 (JQuery) ”，但我不确定为什么会出现问题，而且我发现很难将 '.photo' 替换为 id-tag，因为它应该会影响几个元素。

我还发现“通常，当您尽可能少地搜索或更改 DOM 时，JavaScript 会更快。 ”这可能是我的问题吗？如果是这样，我该怎么做？

所以请让我知道我的代码中是否有什么奇怪的地方，或者你有什么想法。谢谢！

代码

$(document).ready(function(){
    $(".photo").mouseenter(function(){
        $(this).fadeTo("fast", 0.9);
    });
    $(".photo").mouseleave(function(){
        $(this).fadeTo("fast", 0.6);
    });
    $('.photo').click(function() {
        $(this).animate({width: '900px'});
        $(this).mouseleave(function(){
            $(this).animate({width: '294px'});
        });
    });

    $('.trigger').click(function() {
        if( $("#5").is(":hidden") ) {
            $("#6").hide('slow');
            $('.trigger').fadeTo('slow', 0);
        } else if ( $("#4").is(":hidden") ){
            $("#5").hide('slow');
        } else if ( $("#3").is(":hidden") ){
            $("#4").hide('slow');
        } else if ( $("#2").is(":hidden") ){
            $("#3").hide('slow');
        } else if ( $("#1").is(":hidden") ){
            $("#2").hide('slow');
        } else {
            $("#1").hide('slow');
            $(".triggerR").fadeTo('slow', 1);
        }
    });

    $('.triggerR').click(function() {
        if( $("#6").is(":hidden") ) {
            $("#6").toggle('slow');
            $(".trigger").fadeTo('slow', 1);
        } else if( $("#5").is(":hidden") ) {
            $("#5").toggle('slow');
        } else if ( $("#4").is(":hidden") ){
            $("#4").toggle('slow');
        } else if ( $("#3").is(":hidden") ){
            $("#3").show('slow');
        } else if ( $("#2").is(":hidden") ){
            $("#2").show('slow');
        } else if ( $("#1").is(":hidden") ){
            $("#1").show('slow');
            $(".triggerR").fadeTo('slow', 0);
        } 
    });
});
4

4 回答 4

1

问题是您正在排队不同的动画。stop在执行另一个动画之前，使用动画上的功能取消所有 qued动画。

。停止（）

$(this).stop(true, true).fadeTo("fast", 0.9);

编辑：根据@guffa 建议保持不透明度更好地使用

$(this).stop(true, false).fadeTo("fast", 0.9);
于 2013-02-01T13:50:13.250 回答
0

这些是最小的优化，因此您不会看到它们带来巨大的性能提升，而是这样做：

$('.photo').mouseenter(...);
$('.photo').mouseleave(...);
$('.photo').click(...);

相反，您将链接这些函数，以便您只执行$('.photo')一次：

$('.photo').mouseenter(...).mouseleave(...).click(...);

还要查看您if多次选择相同元素的条件；您可以将结果保存到变量中：

var foo = $('#6');

然后使用foo而不是$('#6')重复做。

这有点大，但是您在事件处理程序中添加了一个事件处理程序。每次单击.photo元素时，都会添加另一个mouseleave事件处理程序；它们会堆积起来，并可能导致页面变慢。

于 2013-02-01T13:59:35.430 回答
0

代码有两个问题。首先，如果mouseenter和mouseleate事件发生在前一个动画完成之前，动画将被排队。如果您快速进出几次，您将看到所有动画都在播放，直到动画队列为空。

在开始新动画之前停止任何 previos 动画：

$(".photo").mouseenter(function(){
  $(this).stop().fadeTo("fast", 0.9);
});
$(".photo").mouseleave(function(){
  $(this).stop().fadeTo("fast", 0.6);
});

其次，在click事件处理程序中，您正在注册另一个mouseleave事件，因此，如果您多次单击，您将有多个事件处理程序在您离开元素时添加动画。您将看不到动画，因为它们会将大小从 294px 设置为 294px，但所有动画都已排队等待其他动画。

使用后取消绑定mouseleave事件处理程序：

$('.photo').click(function() {
  $(this).animate({width: '900px'});
  function handler() {
    $(this).unbind('mouseleave', handler);
    $(this).animate({width: '294px'});
  }
  $(this).mouseleave(handler);
});
于 2013-02-01T14:01:01.397 回答
0

问题可能是您有很多带有“照片”类的元素，并且您为所有这些元素添加了不同的侦听器。

我不确定您将如何避免 mouseenter / mouseleave，但您可以使用 事件委托进行单击...

于 2013-02-01T13:52:38.217 回答