CODEWITHSUNDEEP
jquery
Andelas
Andelas

Reputation: 2052

Fade in divs by passing two id's in query

I'm trying to create a row of divs with hidden images inside, when moused over the middot will fade out, image will fade in, then fade out when the mouse leaves that div. I know I need to do something with the .hover function in jquery.

For example

<div id='1_1'>
 &midddot;
 <img src='image1_1.jpg' style='display:none'>
</div>
<div id='1_2'>
 &midddot;
 <img src='image1_2.jpg' style='display:none'>
</div>
<div id='1_3>
 &midddot;
 <img src='image1_3.jpg' style='display:none'>
</div>

Each div will represent a page of an article. So where id='1_3', that'd be a row 1, page 3, or id='1_1' would be row 1, page 1.

Just not sure how to structure the jquery to get this done.

FYI, I'm using php/mysql to output the info. So the above code would be one loop in that "while" statement. Subsequent loops would increase the row number (id="2_1", "2_2", etc.).

Thanks for any advice.

Upvotes: 0

Views: 144

Answers (2)

Tomm
Tomm

Reputation: 2142

Add a class to your divs to make them easier to select in jQuery. 

<div id='1_1' class='fade'>
   &midddot;
   <img src='image1_1.jpg' style='display:none'>
</div>
<div id='1_2' class='fade'>
   &midddot;
   <img src='image1_2.jpg' style='display:none'>
</div>
...

Then use the hover function:

 <script type="text/javascript">
    $(document).ready(function() {
       $("li.fade").hover(function(){  
           $("img", this).fadeIn();
           $("img", this).fadeOut();
       });
    });
  </script>

Upvotes: 1

vinceh
vinceh

Reputation: 3510

Use mouseenter() and mouseleave() along with your fadeOut() and fadeIn() for an effect like this

Upvotes: 0

Related Questions