CODEWITHSUNDEEP
phpjavascriptjquerywordpress
Francis Alvin Tan
Francis Alvin Tan

Reputation: 1087

image fade on hover and show content

can I get some help here please

I got a code that is working for only one image but cannot for multiple images with different content

HTML

<ul id="base">
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1"  />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1"  />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
</ul>

CSS

.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;}
.element img {
      position:absolute;
      top:0;
      left:0;
      height:150px;
      width:150px;
    }
.content {height:150px;width:150px;background:gray;font-size:9px;}

jQuery

$(".element").hover(function() {
        //fadeout first image using jQuery fadeOut
        $(".img1").fadeOut(300);
        //fadein second image using jQuery fadeIn 
        $(".content").fadeIn(300);
    }, function () {
        //fadeout second image using jQuery fadeOut
        $(".img1").fadeIn(300);
        //fadein first image using jQuery fadeIn
        $(".content").fadeOut(300);
    });

and a fiddle for testing http://jsfiddle.net/nQvay/1/, need some help

Upvotes: 0

Views: 408

Answers (3)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

<ul id="base">
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1"  />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
<li class="element" >
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1"  />
<div style="display:none;" class="content">this is a text message 2</div>
</li>
</ul>


<style>
ul{
padding:0px;
margin:0px;
list-style:none;
}
.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;position:relative;}
.element img {
      position:absolute;
      top:0;
      left:0;
      height:150px;
      width:150px;
    }
.content {height:150px;width:150px;background:gray;font-size:9px;}
</style>


<script>
$(".element").hover(function() {
        //fadeout first image using jQuery fadeOut
        $(this).children(".img1").fadeOut(300);
        //fadein second image using jQuery fadeIn 
        $(this).children(".content").fadeIn(300);
    }, function () {
        //fadeout second image using jQuery fadeOut
        $(this).children(".img1").fadeIn(300);
        //fadein first image using jQuery fadeIn
        $(this).children(".content").fadeOut(300);
    });
</script>

Upvotes: 0

Nandu
Nandu

Reputation: 3126

Try this

JSFIDDLE

$(document).ready(function(){
$(".element").hover(function() {
            //fadeout first image using jQuery fadeOut
            $(".element").children(".img1").fadeOut(300);
            //fadein second image using jQuery fadeIn 
            $(".element").children(".content").fadeIn(300);
        }, function () {
            //fadeout second image using jQuery fadeOut
           $(".element").children(".img1").fadeIn(300);
            //fadein first image using jQuery fadeIn
           $(".element").children(".content").fadeOut(300);
        });
});

Upvotes: 0

Taron Mehrabyan
Taron Mehrabyan

Reputation: 2229

You must specify whose .img1 and .content you want to be faded 

 $(".element").hover(function() {
            //fadeout first image using jQuery fadeOut
            $(this).children(".img1").fadeOut(300);
            //fadein second image using jQuery fadeIn 
            $(this).children(".content").fadeIn(300);
        }, function () {
            //fadeout second image using jQuery fadeOut
            $(this).children(".img1").fadeIn(300);
            //fadein first image using jQuery fadeIn
           $(this).children(".content").fadeOut(300);
        });

Upvotes: 1

Related Questions