[jQuery] Re: Hover with a fade question (n00b)

[Karl Swedberg]

With jQuery UI, you can also animate with .addClass() and .removeClass()

$(document).ready(function() {

       $('.button').hover(function() {
            $(this).addClass('foo', 500);
       }, function() {
            $(this).removeClass('foo', 500);
       });

});

http://docs.jquery.com/UI/Effects/ClassTransitions


--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Oct 25, 2008, at 2:32 PM, ricardobeat wrote:

Ah I see. You can't "fade a class". You need the animate() function
and jQuery UI (http://ui.jquery.com/), then you can do this:

$(document).ready(function() {

       $('.button').hover(function() {
            $(this).animate({ backgroundColor: '#AAFFAA'}, 500);
       }, function() {
            $(this).animate({ backgroundColor: '#FFFFFF'}, 500);
       });

});

On Oct 25, 3:14 am, gerbert <[EMAIL PROTECTED]> wrote:

here is what it looks like without the 
fade:http://www.oddvice.com/switchertest/test.html

I just want to add a simple fadeIn to the green button with the hover
function. Here is the full code without any fadeIn:

// JavaScript Document
$(document).ready(function() {
  $('.button').click(function(event) {
    $('p').removeClass();
    if (this.id == 'blueswitcher') {
      $('p').addClass('blue');
    }
    else if (this.id == 'redswitcher') {
      $('p').addClass('red');
    }
    $('.button').removeClass('selected');
    $(this).addClass('selected');
    event.stopPropagation();
  });

});

$(document).ready(function() {
  $('.button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });

});

Thanks again.

On Oct 24, 8:36 pm, gerbert <[EMAIL PROTECTED]> wrote:

Thank you for cleaning that up,  but it's still not quite right.

It's not fading in, it just adds the class instantly. and when it
fades out, it removes the div I put the .hover class on.

Thanks for trying.

On Oct 24, 8:03 pm, ricardobeat <[EMAIL PROTECTED]> wrote:

$(document).ready(function() {

        $('.button').hover(function() {
             $(this).addClass('hover').fadeIn();
        }, function() {
             $(this).removeClass('hover').fadeOut();
        });

});

This should work, it's exactly the same as your second try but with
correct syntax.

On Oct 24, 11:54 pm, gerbert <[EMAIL PROTECTED]> wrote:

Hi, I'm new to this group and to jQuery and javascript in general. I

would like to learn how to use hover with a fade. I can do each
separately but am having a hard time chaining them. Here's my best
attempts at a simple hover button with a fadeIn and FadeOut:

$(document).ready(function() {
        $('.button').hover(function() {
    $(this).fadeIn(1000,$('.button').addClass('hover'));
  }, function() {
    $(this).fadeOut(1000,$('.button').removeClass('hover'));
  });

});

That didn't work. Nor did this:

$(document).ready(function() {
        $('.button').hover(function() {
    $(this).addClass('hover').fadeIn(1000);
  }, function() {
    $(this).removeClass('hover'.fadeOut(1000));
  });

});

If anybody can help me out I'd be stoked. I've spent too much time on

this seemingly simple effect. Thanks.