0

私は現在これを持っており、正常に動作しますが、同じことを行うためのより良い方法が必要でした.2つの異なる機能と保存行ではなく、1つの機能を持つ可能性があります. 非常に多くの行よりもエレガントな方法です。次の 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

他の答えのいくつかはおそらくよりエレガントですが、行数を減らして重複を減らしたい場合は、再利用可能な関数に分割して、次のように 2 回呼び出すことができます。

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);
}

変更するものだけを指定して、2 回呼び出すことができます。

imageMouseover("#container", "img", "1", "0.3", true);
imageMouseover("#container", ".gallery a img", "0.3", "1", false);
于 2012-06-22T22:29:30.087 に答える
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

共通コードを「明るく」と「暗く」の 2 つの関数に引き出すことができます。

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

これはあなたを助けるはずです。
要素ごとに異なる不透明度があるため、要素ごとに作成する必要がある場合は問題になるため、 jQuery.data()ifを使用して保存するのが最善の方法です。

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 に答える