My jQuery showcase is an opacity issue :)

Question

I have a bunch of photos and I'm looking for the best way to show them in one place using jQuery.

What do you think of my concept? Is this really, or maybe there are other ways than transferring all images to each other and reproducing with opacity?

Anyway, I don't know why this code:

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

It does not show anything. Any help?

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

Answer 1

, , , , img.'+itemClass img .'+itemClass; img .

, / , , , .

Answer 2

, :

• : jQuery('#demo img .'+itemClass) jQuery('#demo img.'+itemClass)
• ( , # 3, , , 3- )

Answer 3

.

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

• .attr('class') - , , .attr('className')
• 0, , ,
• if you want it to look right, you need to either carefully choose which images will fade in and out, or fade before departure, as shown in the demo
• you also need to close the gap between imgand the class, otherwise it will look for the class as a descendant of the image, and not part of it:$('img.class')

Answer 4

You have a typo (no spaces) between img and itemClass. It should look 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);
});