Animate Farbe auf MouseEnter- (und wieder zurück zur Originalfarbe auf mouseleave)

Question

ich folgende jQuery-Code haben: -

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. 
      }); 
     } 
    }); 
}); 

Also im Grunde gibt es Boxen Sie schweben können, haben einige Schriftfarbe schwarz, einige weiß sind . Im Nousenenter müssen sie alle weiß werden, auf Mausklick müssen sie wieder ihre ursprüngliche Farbe annehmen. Ich habe das oben versucht und versucht, die Textfarbe zum Anfang auf mouseleave zu setzen, aber egal was ich tue, bleiben sie auf mouseleave weiß (wo die ursprünglichen schwarzen Schriftarten zurück zu mouseleave schwarz gehen sollten.

Wenn Sie schauen bei diesen schnellen JSFIDDLE habe ich es es ein bisschen machen wird klarer als ich versuchte, dank im Voraus Menschen zu erklären,!

Answer 1

Es besteht keine Notwendigkeit für fast jede JS-Code ist, können Sie all dies in CSS allein erreichen:

.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

Answer 2

der Wert precolor muss außerhalb der mouseenter mouseleave Aktion sein. , wenn Sie es in der mouseenter mouseleave die Tat umzusetzen, es wird immer nicht vorhandene Farbe, wenn Sie Leave.

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. 
     }); 
    } 
    }); 
}); 

Answer 3

Mit Ihrer ersten Codebeispiel:

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