fadeIn 不能与 .append() 一起使用

Question

如果你想这样称呼它，我整理了一个褪色的菜单。我遇到的问题是一切都很好，除了我附加到链接末尾的图像。它淡出效果很好，但我根本无法让淡入淡出工作。

$(document).ready(function() {

$(".fade").hover(
    function () {
        $(this).fadeIn(500).append($("IMAGE HERE"));
        $(this).stop().animate({
            opacity: 1,
            borderBottomColor: "#6BD8FF",
            borderLeftColor: "#6BD8FF",
            borderRightColor: "#6BD8FF",
            borderTopColor: "#6BD8FF",
            color: "#03A5DF",
            backgroundColor: "#E3F8FF"
        }, 500);
    },
    function () {
        $(this).find("img:last").fadeOut(200);
        $(this).stop().animate({
            opacity: 1,
            borderBottomColor: "#CCCCCC",
            borderLeftColor: "#CCCCCC",
            borderRightColor: "#CCCCCC",
            borderTopColor: "#CCCCCC",
            color: "#BBBBBB",
            backgroundColor: "#F9F9F9"
        }, 200);
    }
);

});

更改淡入时间没有任何作用，如果您稍微看一下，您会发现它没有淡入，而只是出现。其他一切工作正常。如果有人有帮助，我将不胜感激。谢谢！

Answer 1

编辑：出于历史原因，以下为原文

我已经解决了这个问题，您可以在以下位置找到解决方案 http://jsbin.com/hogantest/5 当然可以在http://jsbin.com/hogantest/5/edit查看所有源代码并使用它

因为stop() 不能与fadeIn() 和fadeOut() 一起使用，所以如果您快速移动鼠标指针，就会出现一种奇怪的箭头。我将修复留给 OP。

这里是问题和解决方案。问题 1 没有正确使用停止。您只想在淡出项目上使用停止。这将停止淡入并立即开始淡出。另外（作为我的原始评论）你想先停下来然后做这项工作。

问题 2 是在悬停时动态添加图像。哎呀！将图像添加一次且仅一次，然后对其进行操作。

以下是修改后代码的相关部分：

$(document).ready(function() {
  $(".fade").each( function() {
    $(this).append($("<img style='float:right;' src='http://cu3ed.com/jqfade/img/plus.png' />"));
    $(this).find("img:last").hide();
  });

  $(".fade").hover(
    function () {
      var me = $(this);

      me.find("img:last").fadeIn(500);

      me.animate({
        opacity: 1,
        borderBottomColor: "#6BD8FF",
        borderLeftColor: "#6BD8FF",
        borderRightColor: "#6BD8FF",
        borderTopColor: "#6BD8FF",
        color: "#03A5DF",
        backgroundColor: "#E3F8FF"
      }, 500);
    },
    function () {
      var me = $(this);
      me.stop();
      me.find("img:last").fadeOut(200);
      me.animate({
        opacity: 1,
        borderBottomColor: "#CCCCCC",
        borderLeftColor: "#CCCCCC",
        borderRightColor: "#CCCCCC",
        borderTopColor: "#CCCCCC",
        color: "#BBBBBB",
        backgroundColor: "#F9F9F9"
      }, 200);
    }
  );

});​

正如我所说，仍然有一个修复方法——去掉 fadeIn() 和 fadeOut() 并使用 animate 以便您可以调用 stop()。我还会将 img 标签添加到原始 html 代码中，除非这是一个油脂猴脚本或类似的东西，否则没有理由动态添加它。

原始答案

这是一个猜测，太晚了，所以我没有测试它...在图像淡入之前移动 stop()。

function () {
       var me = $(this);
       me.stop();
       me.fadeIn(500).append($("<img class='plus' src='img/plus.png' />"));
       me.animate({
            opacity: 1,
            borderBottomColor: "#6BD8FF",
            borderLeftColor: "#6BD8FF",
            borderRightColor: "#6BD8FF",
            borderTopColor: "#6BD8FF",
            color: "#03A5DF",
            backgroundColor: "#E3F8FF"
        }, 500);
    },