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.
