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(true, true) API：http://api.jquery.com/stop/

或查看此处effects http://docs.jquery.com/Effects您可以添加带有slow效果的节目。

如果你可以轻弹我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上逐渐淡出，请在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");
    });
                  }
              )
            });
        });

滚动时的古怪jQuery

2 个答案: