CODEWITHSUNDEEP
javascriptjqueryhtmldom
Aaron Brewer
Aaron Brewer

Reputation: 3667

jQuery .addClass and .fadeIn?

So, I have these h1 elements that are links and I want to add a class to them and fade that class in once the element has been hovered over, and then onMouseOut have the class removed, whilst fading the class. But using the fade function does nothing for me. Seeing as it hides the element. Any ideas?

jQuery(".categories h1 a").hover(
function () {
    jQuery(this).fadeIn("slow").addClass("active");
},
function(){
    jQuery(this).fadeOut("slow").removeClass("active");
});
});

Thanks!

EDIT:::

jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});

Upvotes: 12

Views: 59950

Answers (6)

Nishanth Shaan
Nishanth Shaan

Reputation: 1472

If you dont wanna use jquery UI because it will be an extra load, you can do the following :

(was useful to me when the 'hidden' bootstrap class is used in my app)

Fade In slowly while removing the class :

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)

Fade Out slowly, add the class and then fade back in:

$('.myClass').fadeOut(1000, function(){
    $(this).addClass('hidden'); //or any other class
}).fadeIn(10000)

hope this will simplify someone's task!

Upvotes: 8

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Try using jQuery UI .addClass and .removeClass.

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

DEMO (For some reason, it doesn't animate properly(fade) for the first time.. but then onwards it works fine)

Edit: Updated for completeness.

You can also use .animate to get the desired effect. See below,

$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop().animate({
            backgroundColor: "#a7bf51"
        }, 800);
    }, function() {
        $(this).stop().animate({
            backgroundColor: "#FFFFFF"
        }, 800);
    });

});

DEMO

Upvotes: 13

b01
b01

Reputation: 4384

Try this, and here's the jsFiddle (enter link description here) : 

<script type="text/javascript">
    jQuery(".categories h1").hover(function () {
            jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeIn("slow");
        },
        function() {
            jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeOut("slow");
    });
</script>
<style type="text/css">
    .categories h1 {
        background-color: rgb(200, 200, 200);
        display: block;
        padding: 5px;
        margin: 5px;
        width: 100px
    }
    .categories h1 a {
        display: none;
    }
</style>
<div class="categories">
    <h1><a href="#">Item 1</a></h1>
    <h1><a href="#">Item 2</a></h1>
    <h1><a href="#">Item 3</a></h1>
</div>​

Upvotes: 0

Christopher Marshall
Christopher Marshall

Reputation: 10736

If you have the jQuery UI library loaded, you can set an extra param for the toggleClass function.

Set your opacity's via css.

h1 a {
  opacity:0.8;
}

h1 a.hovered {
  opacity: 1.0;
}

then 

jQuery(".categories h1 a").hover(function(e) {
    $(this).toggleClass('hover', 1000);
}

The 1000 is the millisecond counter on the event. So the effect should fade to 1.0 opacity when hovered in a second and fade out in 1 second when not hovered.

Upvotes: 1

jray
jray

Reputation: 1226

I don't think you can cross fade between classes, but you can use the animate function. animate allows you to affect any css variable over a specified time.

http://api.jquery.com/animate/

I know that removes some styling from the css file, but again, I don't think jQuery will cross fade between classes.

Upvotes: 1

Steve Davis
Steve Davis

Reputation: 716

Sounds like you want the styles of the class to fade in. You should look into animate() for that: http://api.jquery.com/animate/

fadeIn simply fades in the element.

Upvotes: 2

Related Questions