hover

[zura]

Helo,
I am begginer and need help, here is my code. This works only for first div_"some". How do same with other divs_"some".
Thanks for help.

<script>
$(document).ready(function(){
    $('#some').hover(
	  function() {$('#bottom-line').stop().animate({marginTop:'70px',height:'30px'},300);}, 
	  function() {$('#bottom-line').stop().animate({marginTop:'100px',height:'0px'},300);}
    );
});
</script>

<style>
#some{
	width:200px; 
	height:100px; 
	float:left; 
	margin:5px;   
	background-color:#f6f6f6;
}
#bottom-line{
	width:200px;
	height:0;
	margin-top:100px;
	background-color:red;
} 
</style>

  <div id="some">
    <div id="bottom-line"></div>
  </div>
  <div id="some">
    <div id="bottom-line"></div>
  </div>
  <div id="some">
    <div id="bottom-line"></div>
  </div>
   . . .

 

[jpadie]

id's should be unique on your page. it is bad practice to have more than one element with the same id.

it might be better for you to give each of the target divs a class of 'some' instead and each of the internal divs a class of 'bottom-line'. then use the jquery selectors to bind to the divs with a class of some and, within the hover functions, search within the $(this) node for bottom-line

$(this).find('.bottom-line')

and animate the resulting node. you could also just search for the last div

$(this).find('div:last');

 

[vacunita]

IDs are meant to be unique. As such any function or method that gets elements based on their ID will only ever return a single element: the first one it finds.

If you need to apply the events to more than one element use classes instead.

 $('[b][COLOR=#A40000].some[/color][/b]').hover(
	...
    );

 <div [COLOR=#A40000][b]class=[/b][/color]"some">
...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vacunita]

Also you'll want to make sure you only apply the animation to one of the divs ratehr than all of them.

so:

 function() {[COLOR=#A40000]$(this).find[/color]('.bottom-line').stop().animate({marginTop:'70px',height:'30px'},300);}, 
 function() {[COLOR=#A40000]$(this).find[/color]('.bottom-line').stop().animate({marginTop:'100px',height:'0px'},300);}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[zura]

Thanks for help.