CODEWITHSUNDEEP
jquery
nsilva
nsilva

Reputation: 5614

Animate color on mouseenter (and revert back to original color on mouseleave)

I have the following jQuery code:-

jQuery(document).ready(function($) {
    jQuery('.group-overlay').on('mouseenter mouseleave', function(e) {
        var precolor;
        if (e.type === "mouseenter") {
            var precolor = jQuery(this).next('.test-service').find('.txt-sml').css("color");
            jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
                color: "#FFFFFF",
                top: "+=40",
            }, 300, function() {
                // Animation complete.
            });
        } else if (e.type === "mouseleave") {
            jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
                color: "'" + precolor + "'",
                top: "-=40",
            }, 300, function() {
                // Animation complete.
            });
        }
    });
});

So basically there are boxes you can hover, some have font color black, some are white. On nouseenter they all need to go white, on mouseleave they need to go back to their original color. I have tried the above and tried setting the text color to initial on mouseleave but no matter what I do they stay white on mouseleave (where as the original black fonts should go back to black on mouseleave.

If you have a look at this quick JSFIDDLE I made it will make it a bit clearer than me trying to explain, thanks in advance people!

Upvotes: 1

Views: 128

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

There's no need for any JS code here, you can achieve all this in CSS alone:

.test-service {
    transition: padding 0.5s;
    /* other properties... */
}

.group-overlay:hover + .test-service {
    padding-top: 40px;
}
.group-overlay:hover + .test-service .txt-sml {
    color: #FFF;
}

Working example

Upvotes: 5

denchu
denchu

Reputation: 869

Using your initial code sample:

jQuery(document).ready(function($) {
    var precolor = "";
    jQuery('.group-overlay').on('mouseenter', function(e) {
        precolor = jQuery(this).next('.test-service').find('.txt-sml').css("color");
        jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
          color: "#FFFFFF",
          top: "+=40",
        }, 300, function() {
              // Animation complete.
            });
    }).on('mouseleave', function(e) {
        jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
          color: "'" + precolor + "'",
          top: "-=40",
        }, 300, function() {
              // Animation complete.
            });
    });
});

Demo jsfiddle here

Upvotes: 0

Jacky Shek
Jacky Shek

Reputation: 955

The value of precolor must be outside from the mouseenter mouseleave action. if you put it in the mouseenter mouseleave action, it will getting non-existing color when you mouseleave.

jQuery(document).ready(function($) {
 var precolor;
  jQuery('.group-overlay').on('mouseenter mouseleave', function(e) {
    if (e.type === "mouseenter") {
      precolor = jQuery(this).next('.test-service').find('.txt-sml').css("color");
      jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
        color: "#FFFFFF",
        top: "+=40",
      }, 300, function() {
        // Animation complete.
      });
    } else if (e.type === "mouseleave") {
    console.log(precolor);
      jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
        color: "'" + precolor + "'",
        top: "-=40",
      }, 300, function() {
        // Animation complete.
      });
    }
  });
});

Upvotes: 2

Related Questions