2010-12-10 8 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'; 



    } 

필자

this.fadeIn을 추가하려면 여기를 시도 ('빠른');

클래스를 설정 한 후에도 작동하지 않습니다. 어떤 아이디어?

감사

+3

jQuery를 사용하고 있습니까? 모든 네이티브 DOM 메서드를 사용하고 있으므로 jQuery 태그가 붙어 있는지 궁금합니다. –

+0

안녕하세요, 예, Jquery 페이지에서 사용하고 있습니다. – BobFlemming

답변

1

이 해결 사용하여 해결 :

$ (이) .hide를(); $ (this) .fadeIn ("slow"); this.className = '활성';

+0

$ (this) .fadeOut ("slow");를 사용했습니다. $ (this) .addClass ("active"); 그러나 크기와 2 개의 threes. – TomFirth

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