Моя jQuery "витрина" - проблема непрозрачности :) - PullRequest
Новая
       17

Моя jQuery "витрина" - проблема непрозрачности :)

3 голосов
/ 04 февраля 2011

У меня куча фотографий, и я ищу лучший способ показать их в одном месте с помощью jQuery.

Что вы думаете о моей концепции?Это допустимо или, может быть, есть и другие способы, кроме как наложить все изображения друг на друга и поиграть с непрозрачностью?

В любом случае, я не знаю, почему этот код:

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

Ничего не показывает.Любая рука помощи?

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

Ответы [ 4 ]

3 голосов
/ 04 февраля 2011

Я почти уверен, что имена классов не могут начинаться с цифры, но даже в этом случае, если у вашего изображения есть определенный класс, вы должны использовать img.'+itemClass вместо img .'+itemClass;Вы помещаете пробел между селектором img и классом.

Кроме того, вам придется удалять / затухать изображения, которые вы не хотите показывать, так как в противном случае одно изображение может отображаться за изображением, которое выне хочу показывать.

2 голосов
/ 04 февраля 2011

Хорошо, это то, что я сделал для того, чтобы оно работало:

  • Удалите пробел здесь: jQuery('#demo img .'+itemClass) до jQuery('#demo img.'+itemClass)
  • Я бы также порекомендовал вам скрыть изображения передпоказ нужного (если вы выберете изображение, скажем, № 3, а затем снова выберете первое изображение, оно не будет отображаться, поскольку над ним будет 3-е)
1 голос
/ 04 февраля 2011

У вас есть опечатка (без пробела) между 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);
});
1 голос
/ 04 февраля 2011

Исправлено несколько проблем.

Обновлено: http://jsfiddle.net/d4sEW/7/

  • .attr('class') - это неправильно, нет класса атрибута, это .attr('className')
  • вам нужно переключить другие значения непрозрачности на 0, в противном случае в зависимости от того, что находится сверху стека, будет отображаться
  • , если вы хотите, чтобы это выглядело правильно, вам нужно будет либо тщательно выбрать, какие снимки исчезать и исчезатьили потушить партию до появления, как показано в демонстрации
  • , вам также необходимо закрыть пространство между img и классом, в противном случае он ищет класс как потомок изображения, не являющаяся его частью: $('img.class')
...