Jquery FadeIn an active class

So I have a gallery , that I need to have the main image fade in and then crossfade once clicked.开发者_运维百科 The class for the main image is set to 'active' once clicked:

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 tried here to add

this.fadeIn('fast');

after the class is set, but that doesnt work. Any ideas?

Thanks

Solved using this workaround:

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

Just throwing this out there in hopes it helps a bit. If you're including jQuery in the page, make use of it (at least as far as maintainability goes), like this:

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