古怪的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翻轉

回答

相關問題