0

我目前有这个，它工作得很好，但我想有一个更好的方法来做同样的事情，可能有一个单一的功能而不是 2 个独特的功能并保存行。只是比这么多行更优雅的方式。以下 2 个函数看起来很相似，但它们的作用略有不同，如您所见。任何人？谢谢

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
    $(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
}
}, "img");

$("#container").on({
"mouseenter": function () {
    $(this).stop().animate({
        "opacity": "0.3"
    }, 400);
},
"mouseleave": function () {
    $(this).stop().animate({
        "opacity": "1"
    }, 400);
}
}, ".gallery a img");
4

6 回答 6

3

您可以使用逗号,或add()函数指定多个选择器：

$("#container, #container2, #container3")

更新

$("#container, #container2, #container3").on({
"mouseenter": function (e) {
   var id = e.target.id;
   if (id === 'container') {
     // code for #container
   }
   else if (id === 'container2') {
     // code for #container2
   }
   else if (id === 'container3') {
     // code for #container3
   }
},
"mouseleave": function (e) {
   var id = e.target.id;
   if (id === 'container') {
     // code for #container
   }
   else if (id === 'container2') {
     // code for #container2
   }
   else if (id === 'container3') {
     // code for #container3
   }
}
}, "img");
于 2012-06-22T19:17:44.030 回答
1

您可以尝试创建一些通用函数来处理大多数此类事件。

例如：

function someEvent(container, opacity) 
{
    $(container).stop().animate({
        "opacity": opacity
    }, 400);
}


$("#container").on({
   "mouseenter": someFunction($(this), '0.3');
  },
   "mouseleave": someFunction($(this), '1');
  }
}, ".gallery a img");
于 2012-06-22T19:18:27.227 回答
1

您可以将通用代码提取到两个函数中，“变亮”和“变暗”

brighten = function(container,hasCaption) {
    container.stop().animate({opacity:1},400);
    if(hasCaption) {
        container.prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
    }
}

dim = function(container,hasCaption) {
    container.stop().animate({opacity:0.3},400);
    if(hasCaption) {
        container.prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
    }
}

然后你的事件绑定看起来像：

$("#container").on({
    "mouseenter": function () { brighten($(this),true); },
    "mouseleave": function () { dim($(this),true); }
}, "img");

$("#container").on({
    "mouseenter": function () { dim($(this)); },
    "mouseleave": function () { brighten($(this)); }
}, ".gallery a img");
于 2012-06-22T19:25:29.510 回答
1

这应该可以帮助你。
每个元素都有不同的不透明度，所以如果你必须if为每个元素制作一个不透明度，这将是一个问题，所以最好的方法是使用jQuery.data()存储它。

JS

jQuery('#container1').data('opacity', {'enter': 0.1, 'leave': 1});
jQuery('#container2').data('opacity', {'enter': 0, 'leave': 0.1});

jQuery('#container1, #container2').on({
    "mouseenter": function() {
        var $element = jQuery(this);
        $element.stop().animate({
            "opacity": $element.data('opacity').enter;
        }, 400);
        if($element.is('#container1')) {
            $element.prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
        }
    },
    "mouseleave": function() {
        var $element = jQuery(this);
        $element.stop().animate({
            "opacity": $element.data('opacity').leave;
        }, 400);
        if($element.is('#container1')) {
            $element.prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
        }
    }
}, "img");
于 2012-06-22T19:29:54.210 回答
1

未测试：无论如何，最好将代码保存在命名空间中，并从事件中调用相应的函数。

$("#container").on({
"mouseenter": function () {
    var galleryImg = $(this).parents('.gallery').length >=1;
    $(this).stop().animate({
        "opacity": galleryImg? 0.3 : 1
    }, 400);
    if(!gallerImg)$(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
},
"mouseleave": function () {
   var galleryImg = $(this).parents('.gallery').length >=1;
    $(this).stop().animate({
        "opacity": galleryImg? 1 : 0.3
    }, 400);
    if(!gallerImg)$(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
}
}, "img");
于 2012-06-22T19:37:20.663 回答
1

其他一些答案可能更优雅，但如果你只是想减少行数并减少重复，你可以将它分解为一个可重用的函数并像这样调用它两次：

function imageMouseover(selector, filterSelector, mouseEnterOpacity, mouseLeaveOpacity, fadeCaption) {
    $(selector).on({
        "mouseenter": function () {
            $(this).stop().animate({
                "opacity": mouseEnterOpacity
            }, 400);
            if (fadeCaption) {
                $(this).prev(".caption").stop().fadeTo(0, 0).css('visibility', 'visible').fadeTo('fast', 1);
            }
        },
        "mouseleave": function () {
            $(this).stop().animate({
                "opacity": mouseLeaveOpacity
            }, 400);
            if (fadeCaption) {
                $(this).prev(".caption").stop().fadeTo(0, 1).css('visibility', 'visible').fadeTo('fast', 0);
            }
        }
    }, filterSelector);
}

您可以调用它两次，仅指定正在更改的内容：

imageMouseover("#container", "img", "1", "0.3", true);
imageMouseover("#container", ".gallery a img", "0.3", "1", false);
于 2012-06-22T22:29:30.087 回答