CODEWITHSUNDEEP
jquerycssimagejquery-animateopacity
anonymous
anonymous

Reputation: 1539

My jQuery "showcase" - opacity issue :)

I am having a bunch of photos and I'm looking for best way of displaying them at the same place using jQuery.

What do you think of my concept? Is it valid or maybe there are other ways than putting all images on each other and playing with opacity?

Anyways I don't know why this code:

jQuery('#demo img .'+itemClass).animate({opacity: 1});

Doesn't show a thing. Any helping hand?

http://jsfiddle.net/d4sEW/1/

Upvotes: 3

Views: 251

Answers (4)

Joko Wandiro
Joko Wandiro

Reputation: 1987

You have typo(no space) between img and itemClass. it should looks like this :

jQuery('#navi a').click(function(){
  var itemClass = jQuery(this).attr('class');
  $('#demo img').animate({opacity:0});
  jQuery('#demo img.'+itemClass).animate({opacity: 1});
  //alert(itemClass);
});

Upvotes: 1

JCOC611
JCOC611

Reputation: 19709

Ok this is what I did for it to work:

  • Remove a space here: jQuery('#demo img .'+itemClass) to jQuery('#demo img.'+itemClass)
  • I would also recommend you hide the images before showing the desired one (if you select an image, lets say #3, and then select the first image again, it wont be displayed since the 3rd is over it)

Upvotes: 2

Orbling
Orbling

Reputation: 20602

Right a few problems.

Updated: http://jsfiddle.net/d4sEW/7/

  • .attr('class') - this is wrong, there is no attribute class, it's .attr('className')
  • you need to switch the other opacities to 0, otherwise whichever is on top of the stack will show
  • if you want that to look right, you will need to either carefully pick which pictures to fade in and out, or fade the lot out prior to fading in, as shown in the demo
  • also, you need to close the space between img and the class, otherwise it looks for a class as a descendant of the image, not a part of it: $('img.class')

Upvotes: 1

jeroen
jeroen

Reputation: 91734

I´m pretty sure class names can´t start with a number, but even so, if your image has a certain class, you have to use img.'+itemClass instead of img .'+itemClass; you put a space between the img selector and the class.

Apart from that you will have to remove / fade-out the images that you don´t want to show as otherwise one image can show behind an image you don´t want to show.

Upvotes: 3

Related Questions