淡入不.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/编辑

由于stop()不起作用与fadeIn()和fadeOut()存在与箭头附近逗留如果快速移动鼠标指针一个funkyness。余留下的修补程序为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()和使用动画的，所以你可以调用stop()。我也img标签添加到原来的HTML代码，没有理由动态地添加它，除非这是一个油脂猴子脚本或者诸如此类的东西。

<强>原来的答案

这是一个猜测，这是迟到，所以我没有测试它...在图像褪色之前，移动止损（）。

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