CODEWITHSUNDEEP
jqueryjquery-hover
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

jQuery hover after DOM change

this is how I use jQuery hover

hover( handlerIn(eventObject), handlerOut(eventObject) )

$(".box").each(function() {
    var $this = $(this);
    $this.data('baseColor', $this.css('background-color'));
    $this.hover(function() {
        $this.animate( {
            backgroundColor : "white"
        }, 50);
    }, function() {
        $this.animate( {
            backgroundColor : $this.data('baseColor')
        }, 50);
    });
});

The problem is when DOM changes the hover effect does not work anymore. I know the live method solved such problems many times for me but how do I solve it in that case?

Upvotes: 0

Views: 607

Answers (1)

Khez
Khez

Reputation: 10350

From the manual:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

Specifically For example, width, height, or left can be animated but background-color cannot be.

If you're trying just to update the background color to white, try:

 $this.hover(function() {
      $this.css('background-color', '#fff');
 }, function() {
      $this.css('background-color',$this.data('baseColor'));
 });

If you're trying to make the effect appear 50ms after the user hovers, try using delay.

Now if you're attempting a transition from the current color to white, you need to learn about color blending. But to save you the trouble here's an excellent script by Michael Leigeber. It supports background color fading.

Upvotes: 3

Related Questions