我使用jQuery的動畫。其中一部分使用.fadeIn和.fadeOut API。除了在iOS設備上,這在任何地方都可以正常工作。在iOS設備上,淡入淡出並且通常不平滑,即使超過1秒或2秒鐘淡出。可以使用jQuery的fadeIn和fadeOut來使用CSS轉換嗎?
是否有任何方法來重寫或創建一個類似的功能,使用CSS轉換,因爲它們在iOS上看起來比jQuery使用的方法更平滑。
我使用jQuery的動畫。其中一部分使用.fadeIn和.fadeOut API。除了在iOS設備上,這在任何地方都可以正常工作。在iOS設備上,淡入淡出並且通常不平滑,即使超過1秒或2秒鐘淡出。可以使用jQuery的fadeIn和fadeOut來使用CSS轉換嗎?
是否有任何方法來重寫或創建一個類似的功能,使用CSS轉換,因爲它們在iOS上看起來比jQuery使用的方法更平滑。
這是最好的淡入/淡出使用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。
'Uncaught TypeError:Object [object Object] has no method'transition''這是否也需要額外的資源? – Isius 2013-11-19 02:15:15
@Isius YEAH !!對於那個很抱歉。感謝您指出,我剛剛添加到答案。 – 2013-11-19 17:35:37
而不是使用.fadeIn()和.fadeOut(),使用.animate(),你可以執行你喜歡的所有自定義CSS動畫!
我的理解是,動畫和淡入淡出*方法實際上不使用CSS轉換。我*認爲*設置一個計時器,並在一次完成更改完成之前一次將更改生效。問題在於iOS不會加速,而且隨着幀的丟失,事情會變得不穩定。 CSS轉換是硬件加速並且運行更平滑。 – Justin808 2011-04-07 20:53:07
你在iOS的最新版本?在4.3更新中,Mobile Safari獲得了全新的JavaScript引擎,可能會提高您的JS性能。我唯一能做的其他建議是使用移動優化框架,如jquery mobile或jqtouch。 – 2011-04-08 02:27:18
你使用jQuery手機嗎? – Neal 2011-04-07 20:43:58
@Neal - 不是,他們的網站不是iOS或移動特定的,只是想讓它在那裏工作。 – Justin808 2011-04-07 20:50:14