2010-12-10 2 views
0

Итак, у меня есть галерея, что мне нужно, чтобы основное изображение затухало, а затем перекрестно перекрестилось после щелчка. Класс для основного изображения установлено значение «активный» когда-то щелкнул:JQuery FadeIn в активном классе

var gal = { 
init : function() { 
    if (!document.getElementById || !document.createElement || !document.appendChild) return false; 
    if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; 
    var li = document.getElementById('jgal').getElementsByTagName('li'); 
    li[0].className = 'active'; 
    for (i=0; i<li.length; i++) { 
     li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; 
     li[i].title = li[i].getElementsByTagName('img')[0].alt; 
     gal.addEvent(li[i],'click',function() { 
      var im = document.getElementById('jgal').getElementsByTagName('li'); 
      for (j=0; j<im.length; j++) { 
      im[j].className = ''; 
      } 

      this.className = 'active'; 



    } 

Ive пытался здесь, чтобы добавить

this.fadeIn («быстрый»);

после того, как класс установлен, но это не работает. Есть идеи?

Благодаря

+3

Вы используете JQuery или нет? Вы используете все собственные методы DOM, поэтому мне интересно, если это просто помечено как jQuery или ...? – 2010-12-10 11:49:38

+0

привет, да, я использую JQuery на странице. – BobFlemming 2010-12-10 12:08:49

ответ

1

решаемые с помощью этого метода обхода:

$ (это) .hide(); $ (this) .fadeIn ("slow"); this.className = 'active';

0

Просто выбросьте это в надежде, что это поможет. Если вы в том числе JQuery на странице, чтобы использовать его (по крайней мере, насколько ремонтопригодность идет), как это:

var gal = { 
    init : function() { 
    $('#gallery').attr('id', 'jgal').find('li').each(function() { 
     var $this = $(this), i = $this.find('img')[0]; 
     $this.css('backgroundImage', 'url(' + i.src + ')').attr('title', i.alt); 
    }).click(function() { 
     $(this).addClass('active').hide().fadeIn('slow') 
      .siblings().removeClass('active'); 
    }).first().click(); 
    }