CODEWITHSUNDEEP
jquery
Craig Eves
Craig Eves

Reputation: 131

How to show an image that is hidden using jQuery

I'm having issues showing an image that is hidden using jQuery.

I have hidden the an image with the class 'img.zoom' using jQuery. I want to be able to hover over the list item that the image is within and show the image that is hidden. I am able to do this but it affects every list item with that image in. I only want it to affect that particular list item.

Please help.

My code:

 <ul class="portfolio">
  <li> <img src="images/example.jpg" width="200" height="200" alt="Example" /> <img src="images/row.png" width="11" height="11" class="zoom" /> </li>
  <li><img src="images/example.jpg" width="200" height="200" alt="Example" /><img src="images/row.png" width="11" height="11" class="zoom" /></li>
  <li><img src="images/example.jpg" width="200" height="200" alt="Example" /></li>
  <li><img src="images/example.jpg" width="200" height="200" alt="Example" /></li>
</ul>

my js:

// hide zoom button
$("img.zoom").hide(); 
// show zoom button on hover
$("ul li").hover(function () {
$('img.zoom').show();
});

Many thanks in advance.

Craig

UPDATE

I have managed to work this out by adjusting the code like so

$('img.zoom', this).toggle();

But is there away to fadeToggle this in and out?

Upvotes: 0

Views: 2040

Answers (3)

Chris Abrams
Chris Abrams

Reputation: 42410

If you are wanting the fade:

$('ul li').hover(function() {  
    $(this).find('img.zoom').fadeIn();  
},function() {  
    $(this).find('img.zoom').fadeOut();  
});

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

Actually, to be complete and take Akira's answer 1 step further

$('ul li').hover(function() {
    $(this).find('img.zoom').show();
},function() {
    $(this).find('img.zoom').hide();
})

Upvotes: 0

Skilldrick
Skilldrick

Reputation: 70819

Do this in your hover function

$(this).find('img.zoom').show();

this in a callback function represents the current DOM element, so $(this) will resolve to a jQuery object representing the hovered li, and find will do a CSS select based on the descendents of that li.

Upvotes: 3

Related Questions