Simple Hover/Zoom on Multiple Divs

[kkranzo]

I have a bunch of divs/boxes on the page that will contain images of the same size. I have set the overflow for each of the divs to hidden so that I can have a nice zoom animation on each of the images within upon rollover (scale 1.1). I am using TweenMax along with jQuery and I am able to get the script to fire for each div on the page, however the TweenMax part is not working. The image is not scaling up. Am I not using "this" correctly to target whichever div is being hovered over?

 

Here is my code:

 

<style type="text/css">
#tile {
width: 300px;
height: 250px;
overflow: hidden;
}
.tileImage {
width: 300px;
height: 250px;
background-image: url(image.gif);
background-position: center center;
}
</style>
<script language="JavaScript" type="text/javascript">
$('.tileImage').hover(
 function () {
   TweenMax.to(this, 2, {scaleX:1.1, scaleY:1.1, ease:Circ.easeOut});
 },
 function () {
   TweenMax.to(this, 2, {scaleX:1, scaleY:1, ease:Circ.easeOut});
 }
);
</script>

 

And here is the code I have for the html:

 

<div id="tile">
    <div class="tileImage"></div>
</div>

 

Any help would be greatly appreciated!

 

Thanks.

[jamiejefferson]

Actually, in a jQuery callback this is just a reference to the DOM element that triggered the event, so it is fine to use here; you only need to wrap in $() if you need a jQuery object to call jQuery methods and functions on.

 

You aren't seeing the animation because scale is a transform added by CSSPlugin. You need to wrap the scale in a css property (don't include the ease property inside the css property though):

$('.tileImage').hover(
function () {
	TweenMax.to(this, 2, { css:{ scaleX:1.1, scaleY:1.1 }, ease:Circ.easeOut});
},
function () {
	TweenMax.to(this, 2, { css:{ scaleX:1, scaleY:1 }, ease:Circ.easeOut});
}
);

 

Also I'm not sure if this is how your code exists in your project or if it was heavily edited to just show the problem, but jQuery DOM functions ( including $('.getThisClass') ) shouldn't really be run before the DOM is ready. Utilising this simple script setup will prevent problems caused by traversing/editing an incomplete DOM.

$(document).ready(function () {
   // initialisation code goes here e.g.
   // $('.tileImage').hover(...);
});
// functions go here

Edited August 3, 2012 by jamiejefferson

[Carl]

Thanks Jamie. Great answer!

 

I totally missed that people had responded and went head and made this working demo:

http://jsfiddle.net/geekambassador/vBGRd/

[kkranzo]

Thanks guys!