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
