Question

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

您如何看待我的概念？它是否有效，或者除了将所有图像放在一起并使用不透明度之外还有其他方法？

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

jQuery（'＃demo img 。'+ itemClass）.animate（{opacity：1}）;

没有展示的东西。有帮助吗？

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，否则显示在堆栈顶部的任何一个将显示
如果你想让它看起来正确，你需要仔细挑选哪些图片淡入或淡出，或者在淡入之前将其淡出，如演示所示
另外，您需要关闭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);
});

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

4 个答案: