I'm trying to write a simple jquery function that increase the height and the width of a list item by 1.5 but can't seem to do it. I've posted my css and jquery below. Thanks for any help.

 

ul.gallery li.galleryli {
height: 150px;
width: 150px;
}

 

<script  type="text/javascript">

$(document).ready(function() {

$('.galleryli').hover(function() {

var increase = 1.5;

	width = $('.galleryli').width() * increase;

	height = $('.galleryli').height() * increase;

	$('.galleryli').animate({'width':width, 'height':height}, {duration:200});

},

});

</script>

Are there multiple li.galleryli ?

Are there multiple li.galleryli ?

 

I'm guessing your right and he needs to use $(this)

Try this jQuery:

 

$(document).ready(function(){
var galleryli_increase = 1.5;
var galleryli_width = $("li.galleryli").width();
var galleryli_height = $("li.galleryli").height();
$("li.galleryli").mouseover(function(){
   	$(this).stop().animate({width: (galleryli_width*galleryli_increase)+"px", height: (galleryli_height*galleryli_increase)+"px"}, 200);
 	});
 	$("li.galleryli").mouseout(function(){
 		$(this).stop().animate({width: (galleryli_width)+"px", height: (galleryli_height)+"px"}, 200);
 	});
});