1

我的开发人员无法在此页面上创建平稳有效的过渡。请翻转徽标“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>
4

2 回答 2

2

请尝试使用停止：

.stop(true, true) 接口：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);
              }
          )
        });
    });
于 2012-11-15T08:14:34.910 回答
0

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");
    });
                  }
              )
            });
        });
于 2012-11-15T08:25:27.880 回答