我的 jQuery“展示” - 不透明度问题:)

Question

我有一堆照片，我正在寻找使用 jQuery 在同一位置显示它们的最佳方式。

你觉得我的概念怎么样？它是否有效，或者除了将所有图像放在一起并使用不透明度之外，也许还有其他方法？

无论如何，我不知道为什么这段代码：

jQuery('#demo img .'+itemClass).animate({不透明度: 1});

没有显示任何东西。有什么援助之手吗？

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

Answer 1

我很确定类名不能以数字开头，但即便如此，如果您的图像具有特定的类，则必须使用 img.'+itemClass 而不是 img 。 '+itemClass;您在 img 选择器和类之间放置一个空格。

除此之外，您必须删除/淡出您不想显示的图像，否则一张图像可能会显示在您不想显示的图像后面。

Answer 2

好的，这就是我为它工作所做的：

• 删除此处的空格： jQuery('#demo img .'+itemClass) 到 jQuery('#demo img.'+itemClass)< /code>
• 我还建议您在显示所需图像之前隐藏图像（如果您选择图像，假设#3，然后再次选择第一个图像，则不会显示，因为第三个图像位于其上方）

Answer 3

对了几个问题。

更新： http://jsfiddle.net/d4sEW/7/

• .attr('class ') - 这是错误的，没有属性类，它是 .attr('className')
• 您需要将其他不透明度切换为 0，否则以堆栈顶部的为准如果
• 您希望它看起来正确，您将需要仔细选择要淡入和淡出的图片，或者在淡入之前淡出很多图片，如演示中所示
• ，您需要关闭 < 之间的空间code>img 和类，否则它将查找一个类作为图像的后代，而不是图像的一部分：$('img.class')

Answer 4

img 和 itemClass 之间有拼写错误（没有空格）。
它应该看起来像这样：

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);
});