Question

我有以下jQuery代码： -

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

所以基本上你有可以悬停的盒子，有些颜色是黑色，有些是白色。在nouseenter他们都需要变白，在mouseleave他们需要恢复到原来的颜色。我已经尝试了上面的内容并尝试将文本颜色设置为mouseleave上的初始颜色，但无论我做什么，它们都会在mouseleave上保持白色（原来的黑色字体应该在mouseleave上恢复为黑色。

如果你看一下这个快速JSFIDDLE，我会让它比我试图解释的更清楚一点，谢谢提前的人！

Answer 1

这里不需要任何JS代码，你可以在CSS中实现所有这些：

.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

precolor的值必须在mouseenter mouseleave操作之外。如果你把它放在mouseenter 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.
      });
    }
  });
});

Answer 3

使用您的初始代码示例：

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

鼠标中心的动画颜色（并在mouseleave上恢复为原始颜色）

3 个答案: