翻转时怪异的jQuery

Question

我的开发人员在this page上创建平滑而高效的过渡时遇到了麻烦。请将鼠标滚动到徽标"Clockrun“上，并注意文本在完全可见后如何变化(特别是在Chrome中)，以及滚动到徽标上时滚动效果有多奇怪。

这是正在使用的jQuery。有没有更好的方法来做这件事，让过渡更平滑地淡入淡出？

jQuery(document).ready(function(){

        jQuery(".super_featured_desc").css("opacity",0);
        jQuery(".super_featured_logo").each(function(){
          jQuery(this).hover(
              function () {
                jQuery(this).children(".super_featured_desc").css("display","block");
                jQuery(this).children(".super_featured_desc").animate({"opacity": 1}, 400);
              },
              function () {
                jQuery(this).children(".super_featured_desc").css("display","none");
                jQuery(this).children(".super_featured_desc").animate({"opacity": 0}, 400);
              }
          )
        });
    });
    </script>

Answer 1

请尝试使用stop：

.stop(true, true)接口：http://api.jquery.com/stop/

或者在这里查看，你可以添加带有slow效果的effects http://docs.jquery.com/Effects。

如果你能弹我jsfiddle，我可以为你做，希望这能对:)有所帮助

代码

jQuery(document).ready(function(){

        jQuery(".super_featured_desc").css("opacity",0);
        jQuery(".super_featured_logo").each(function(){
          jQuery(this).hover(
              function () {
                jQuery(this).children(".super_featured_desc").css("display","block");
                jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400);
              },
              function () {
                jQuery(this).children(".super_featured_desc").css("display","none");
                jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400);
              }
          )
        });
    });

Answer 2

要在mouseout上实现渐变，请使用鼠标输出动画的回调，并在此处插入您的jQuery(this).children(".super_featured_desc").css("display","none");：

    jQuery(document).ready(function(){

            jQuery(".super_featured_desc").css("opacity",0);
            jQuery(".super_featured_logo").each(function(){
              jQuery(this).hover(
                  function () {
                    jQuery(this).children(".super_featured_desc").css("display","block");
                    jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400);
                  },
                  function () {
                    jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400, function(){
    jQuery(this).css("display","none");
    });
                  }
              )
            });
        });