0

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

2
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by Violet_82
0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.