понимание «этого» внутри плагина

Question

Прежде всего, извините, но я действительно большой новичок.

Я действительно не понимаю «это» в плагине jquery, много искал, но не мог найти ответа.

вот мой плагин (им сделать это только для практики)

jQuery.fn.hoverPlugin = function(){ 

    var element = this; 

    $(element).animate({"opacity" : ".5"}); 


     $(element).hover(function(){ 
      $(element).stop().animate({"opacity" : "1"}); 
     }, function() { 
      $(element).stop().animate({"opacity" : ".5"}); 
     }); 
}; 

вызов

$("img").hoverPlugin(); 

Моя проблема в том, таким образом, это добавляет эффект анимировать на всех изображениях. Все в порядке, если анимация на всех изображениях на странице загружается, но когда я накладываю мышь на изображение, он оживляет все.

Если я пишу это в простом способе

$("img").animate({"opacity" : ".5"}); 


     $("img").hover(function(){ 
      $(this).stop().animate({"opacity" : "1"}); 
     }, function() { 
      $(this).stop().animate({"opacity" : ".5"}); 
     }); 

Он работает так, как я хочу.

Итак, если более опытный разработчик может объяснить мне, как я могу сделать это в своем плагине? Я был бы очень доволен.

Спасибо

Answer 1

Это потому, что this в функции .hoverPlugin ссылается $('img') называли его:

jQuery.fn.hoverPlugin = function(){ 
    var element = this; 

    $(element).animate({"opacity" : ".5"}); 

    $(element).hover(function(){ 
     $(element).stop().animate({"opacity" : "1"}); 
    }, function() { 
     $(element).stop().animate({"opacity" : ".5"}); 
    }); 
}; 
$(document).ready(function(){ 
    $("img").hoverPlugin(); 
}); 

http://jsfiddle.net/ww7gg/

Если вы пытаетесь что с console открытыми, вы увидите что я имею в виду.

Если вы просто изменить это:

$(element).hover(function(){ 
    $(this).stop().animate({"opacity" : "1"}); 
}, function() { 
    $(this).stop().animate({"opacity" : ".5"}); 
}); 

http://jsfiddle.net/ww7gg/1/

Он работает.

И это лучше:

jQuery.fn.hoverPlugin = function(){ 
    this 
     .animate({"opacity" : ".5"}) 
     .hover(function(){ 
      $(this).stop().animate({"opacity" : "1"}); 
     }, function() { 
      $(this).stop().animate({"opacity" : ".5"}); 
     }); 
}; 

Вам не нужно element, просто использовать this и цепь.

http://jsfiddle.net/ww7gg/2/

Answer 2

На плагином:

вар элемент = это; является JQuery Коллекция элемента (ов):

jQuery.fn.hoverPlugin = function(){ 
    var collection = this.animate({"opacity" : ".5"}); //Fade all elements to .5 opactiy. 

    collection.each(function() { 
     var element = this; // Single element from the collection 
      $el = $(element); //Create 1 jquery object and re-use it on the events. 

     $el 
      .hover(function(){ 
       $el.stop().animate({"opacity" : "1"}); 
      }, function() { 
       $el.stop().animate({"opacity" : ".5"}); 
      }); 
    }); 

}; 

Answer 3

jQuery.fn.hoverPlugin = function(){ 

    var element = this; //this is already wrapped as jquery object e.g it will refer to $("img") in your case 

    element.animate({"opacity" : ".5"}); 


     element.hover(function(){ 
      element.stop(true,true).animate({"opacity" : "1"}); 
     }, function() { 
      element.stop().animate({"opacity" : ".5"}); 
     }); 
}; 

и использовать его

$("img").hoverPlugin();