module - All Elements Changing on Hover Modular Jquery -

i'm experimenting modules , i'm unsure of how change scope of hover event in way. you'd guessed i'd image i've hovered on change. appreciated :) it's going obvious literally can't think of how fix it.

console.log(this.$itemicon); 

returns [img, img, img, img, prevobject: m.fn.init(4), context: document, selector: ".work-item img"]

where i'm trying return [img, context: img]

here shortened version of code:

(function () {      var set = {         init: function () {             this.cachedom ();             this.bindevents ();         },         cachedom: function () {             this.$item = $(".work-item");             this.$itemicon = this.$item.find("img");         },         bindevents: function () {             this.$itemicon.hover(growshrink.grow.bind(this), growshrink.shrink.bind(this));         },     };      var growshrink = {         grow: function() {             this.$itemicon.animate({height: "+=10px"}, 100);         },         shrink: function() {             this.$itemicon.animate({height: "-=10px"}, 100);         }     };      set.init ();  })(); 

js fiddle

i'm trying make functionally identical this.

$(".work-item").find("img").hover(function(){      $(this).animate({height: "+=10px"}, 100);  }, function(){     $(this).animate({height: "-=10px"}, 100); }); 

i'm guessing in short you're trying make each image change individually. when this.$item = $(".work-item"); you're telling jquery find <div class="work-item" /> why when hover 1 of them change.

you need for each loop , bind events

bindevents: function() {   this.$itemsicons.each(function() {     var $icon = $(this);      $icon.hover(animations.grow.bind($icon), animations.shrink.bind($icon));   }); }, 

js fiddle