2011-04-07 58 views
3

我使用jQuery的動畫。其中一部分使用.fadeIn和.fadeOut API。除了在iOS設備上,這在任何地方都可以正常工作。在iOS設備上,淡入淡出並且通常不平滑,即使超過1秒或2秒鐘淡出。可以使用jQuery的fadeIn和fadeOut來使用CSS轉換嗎?

是否有任何方法來重寫或創建一個類似的功能,使用CSS轉換,因爲它們在iOS上看起來比jQuery使用的方法更平滑。

+1

你使用jQuery手機嗎? – Neal 2011-04-07 20:43:58

+1

@Neal - 不是,他們的網站不是iOS或移動特定的,只是想讓它在那裏工作。 – Justin808 2011-04-07 20:50:14

回答

3

這是最好的淡入/淡出使用CSS3過渡,我編碼。它支持所有的簽名。到目前爲止,沒有發現錯誤。隨意重複使用

var hasCSSTransitions = Modernizr.csstransitions; 

hasCSSTransitions && (function ($) { 
    $.fn.fadeIn = function (speed, easing, callback) { 
     return this.filter(function (i, elem) { 
         return $.css(elem, 'display') === 'none' || !$.contains(elem.ownerDocument, elem); 
        }) 
        .css('opacity', 0) 
        .show() 
        .end() 
       .transition({ 
        opacity: 1 
       }, speed, easing, callback); 
    }; 

    $.fn.fadeOut = function (speed, easing, callback) { 
     var newCallback = function() { 
      $(this).hide(); 
     }; 

     // Account for `.fadeOut(callback)`. 
     if (typeof speed === 'function') { 
      callback = speed; 
      speed = undefined; 
     } 

     // Account for `.fadeOut(options)`. 
     if (typeof speed === 'object' && typeof speed.complete === 'function') { 
      callback = speed.complete; 
      delete speed.complete; 
     } 

     // Account for `.fadeOut(duration, callback)`. 
     if (typeof easing === 'function') { 
      callback = easing; 
      easing = undefined; 
     } 

     if (typeof callback === 'function') { 
      newCallback = function() { 
       $(this).hide(); 
       callback.apply(this, arguments); 
      }; 
     } 

     return this.transition({ 
      opacity: 0 
     }, speed, easing, newCallback); 
    }; 
}(jQuery)); 

這需要jQuery Transit來自Rico的插件。它只是一個與animate()類似的包裝,但是使用css3。

+0

'Uncaught TypeError:Object [object Object] has no method'transition''這是否也需要額外的資源? – Isius 2013-11-19 02:15:15

+0

@Isius YEAH !!對於那個很抱歉。感謝您指出,我剛剛添加到答案。 – 2013-11-19 17:35:37

1

而不是使用.fadeIn()和.fadeOut(),使用.animate(),你可以執行你喜歡的所有自定義CSS動畫!

+2

我的理解是,動畫和淡入淡出*方法實際上不使用CSS轉換。我*認爲*設置一個計時器,並在一次完成更改完成之前一次將更改生效。問題在於iOS不會加速,而且隨着幀的丟失,事情會變得不穩定。 CSS轉換是硬件加速並且運行更平滑。 – Justin808 2011-04-07 20:53:07

+0

你在iOS的最新版本?在4.3更新中,Mobile Safari獲得了全新的JavaScript引擎,可能會提高您的JS性能。我唯一能做的其他建議是使用移動優化框架,如jquery mobile或jqtouch。 – 2011-04-08 02:27:18