翻转时古怪的 jQuery答案

【问题标题】：Quirky jQuery on rollover翻转时古怪的 jQuery
【发布时间】：2012-11-15 16:25:27
【问题描述】：

我的开发人员无法在 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>

【问题讨论】：

Chrome 和 FF 对我来说都不奇怪。
如果您滚动并打开它会继续淡入淡出。它也不会正确淡出。

标签： jquery

【解决方案1】：

请尝试使用停止：

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

或者看这里effectshttp://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);
              }
          )
        });
    });

【讨论】：

这实际上效果更好。但是滚动时消失而不是逐渐淡出呢？
@TommyCoffee 很高兴它对 :) 有所帮助，您应该查找名为 fadeOut 的事件并相应地链接它。 :) 试试这样.fadeOut('slow');
我不知道这是怎么做到的。这是我的开发人员的代码。我该怎么做？
@TommyCoffee 看这里如何：==> 有停止和淡出的代码示例 ==> stackoverflow.com/questions/11713665/… :)
@TommyCoffee 也给你 +1 :)

【解决方案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");
    });
                  }
              )
            });
        });

【讨论】：