Hi there, I am doing some jquery exercises and I was redoing a small script I saw onto this video (very very good jquery resource by the way) http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-8/
and there is something I am not quite clear about. I copied that onto my test area so I can post the link http://antobbo.webspace.virginmedia.com/various_tests/2011_10_26_image_slides/test.htm

Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Image slides test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>        
        <script type="text/javascript">        
        $(function(){
			$('.wrap').hover(function(){
				$(this).children('.front').stop().animate({"top":'150px'},700);
				
				},function(){
				$(this).children('.front').stop().animate({"top":'0'},300);
				});
			
		});
		
		</script>
        
	</head>

	<body>

		<div class="main_container">

			<div class="wrap">

				<img src="water_thumb_7.jpg"  alt="">
				<img src="back1.jpg" class="front" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_5.jpg" alt="">
				<img src="back2.jpg" class="front" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_6.jpg" alt="">
				<img src="back3.jpg" class="front" alt="">

			</div>

		</div>


	</body>

</html>

and here's the CSS:

.main_container
{
	width:496px;
	height:500px;
	border:1px solid blue;
	margin: 0 auto;
}

.wrap
{
	border: 1px solid magenta;
	width:150px;
	height:150px;
	margin-top:10px;
	margin-left:10px;
	float:left;
	position:relative;
	overflow:hidden;

}

img
{
	position:absolute;
	top: 0;
	left:0;	
}

My question is about the script. As you can see I have a class "wrap" in the html which is used 3 times. When in the script I say:

$('.wrap').hover(function(){				$(this).children('.front').stop().animate({"top":'150px'},700);...

how does the script determine which "wrap" I am referring to? In other words how does it know that I have hovered on the first, second or third "wrap"?

The reason why I am asking that is because I have slightly changed the script to this

$(function(){
			$('.wrap').hover(function(){
				$('img.front').stop().animate({"top":'150px'},700);
				
				},function(){
				$('img.front').stop().animate({"top":'0'},300);
				});
			
		});

thinking that it would work anyway because I am animating the img with a class front, but if I do that when I hover over 1 "wrap" (no matter which one) all the 3 pictures are animated and not just the one I hovered on! How's that?!
thanks

$(this) in the hover function points to the current element. So swap out 'img.front' for this.

Hi pritaeas,
thanks for that. SO basically it is "this" that makes it all working properly. I have tried to swap img.fron for this as I said in my post and got an unexpected (at least for me) result, whereby all the pictures change at the same time. So generally speaking, the keyword "this" refers to the element currently in the script

Hi pritaeas,
thanks it does : - )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.