古怪的jQuery翻转

我的开发人员在this page上创建平滑而高效的转换时遇到了问题。请翻阅标志“Clockrun”，并注意文字如何变化一次完全可见（特别是在Chrome中），以及滚动和翻印徽标时滚动的影响程度。古怪的jQuery翻转

这里是使用的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>

来源

2012-11-15 Michael Rader

这对我来说在Chrome和FF中都不是古怪的。 – jtheman

如果您滑下并继续淡入淡出。它也不会正确淡出。 –

请尝试使用站：

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

来源

2012-11-15 08:14:34

这实际上效果更好。但是，当你逐渐消失而不是逐渐淡出时，消失的情况如何？ –

@TommyCoffee很高兴帮助'：）'你应该寻找名为'fadeOut'的事件并相应地链接它。 '：''尝试像这样'.fadeOut（'slow'）;' –

我不知道这是如何完成的。这是我的开发人员的代码。我会怎么做？ –

为了实现对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-15 08:25:27 kayen

我试过使用这段代码，但它非常古怪。 –

古怪的jQuery翻转

回答

相关问题