CODEWITHSUNDEEP
javascriptjqueryhtml
Miura-shi
Miura-shi

Reputation: 4519

jQuery mouseover fade effect

I've been learning how to do a Jquery mouse over effect from http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

How do I have three separate buttons with this effect? I keep having a problem of the Divs overlapping when i duplicate them and I can't move them away from each other. Sorry if my initial question was confusing! Here is my jsfiddle: http://jsfiddle.net/japaneselanguagefriend/EgDqy/

<div class="fadehover"><img src="button 1" alt="" class="a" /><img src="button 1 roll" alt="" class="b" /></div>

<div class="fadehover"><img src="button 2" alt="" class="c" /><img src="button 2 roll" alt="" class="d" /></div>

Upvotes: 0

Views: 1142

Answers (2)

Lee
Lee

Reputation: 10603

Basically because the inner elements of the div's are absolute positioned, the div's do not have any measurements (there is a technical word for this but is escapes me). You basically need to explicitly set the width and height of the div's. You can do this in CSS or dynamically generate the css in javascript/jquery. Here is an example using jquery.

http://jsfiddle.net/EgDqy/13/

Example paints a thousands words, this may help others understand the problem if they see this question. Click the button on the right

http://jsfiddle.net/EgDqy/16/

Upvotes: 2

Lowkase
Lowkase

Reputation: 5699

Here is a fiddle that should start you on the right path:

http://jsfiddle.net/EgDqy/12/

<div class="cell">

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" display /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>


<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>

<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>​


$(".cell").hover(
   function() {
      $(this).find('.fader').fadeOut("slow");
   },
   function() {
      $(this).find('.fader').fadeIn("slow");
   }
);


.cell{ width:100px; display:inline-block; position:relative; }
.cell img { width:100px; position:absolute; top:0; left:0; }

Upvotes: 2

Related Questions