Oh, so you can actually "fade a class"! Nice :D
I'm not very intimate with jQuery UI, sorry gerbert, thanks Karl :)
On 25 out, 18:57, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> 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 Swedbergwww.englishrules.comwww.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.
