jQuery循環動畫每次都會暫停。如何避免暫停？

我試圖讓一個塊在100％不透明度和一些部分透明的不透明度之間「脈動」。如果可能的話，我想用jQuery內置的功能來做到這一點。我寧願不添加一個插件來獲得這種效果。下面是我想使用的代碼：jQuery循環動畫每次都會暫停。如何避免暫停？

$(document).ready(function() { 
function pulsate() { 
    $("#pulsating-block").animate({opacity: 0.2}, 3000).animate({opacity: 1}, 3000, null, function() {pulsate()}); 
} 
pulsate(); });

的問題是，每一個動畫完成的時候，它會暫停再次循環之前約1秒鐘。我如何避免暫停，以便獲得平穩的「脈動」效果？（注意：動畫在這個例子誇張突出，我有問題）

來源

2010-01-29 Tim Mackey

我試過這段代碼，並沒有在動畫中看到停頓。只有我嗎？你在慢速機器還是舊瀏覽器上運行？ – brianpeiris 2010-01-29 20:18:52

我在四核G5上運行，所以我不認爲它是一個速度問題:-)，並且我已經在Firefox和Safari（最新版本）中嘗試了這一點。我也使用jQuery的v1.4.1，這是最新的版本。儘量縮短時間，這可能有助於看到我在說什麼。下面是它是如何出現在我身上的： \\\\\ ///// ---- \\\\\\ ///// ---- （「\」=淡出，「/」淡入，「 - 」=不透明度不變） – 2010-01-29 21:12:30

也許你的問題是與"swing"緩和功能的jQuery默認情況下使用。

你可能想嘗試"linear"寬鬆函數：

$(document).ready(function() { 
    function pulsate() { 
    $("#pulsating-block"). 
     animate({opacity: 0.2}, 3000, 'linear'). 
     animate({opacity: 1}, 3000, 'linear', pulsate); 
    } 
    pulsate(); 
});

我還編寫了一個小插件搏動包括"bounce"緩和功能，可能是根據自己的喜好。我應該注意到插件使用連續計算來執行動畫，而不是兩個單獨的淡入/淡出動畫，所以它可能有助於解決「暫停」問題。（說實話，我還沒有看到你所談論的停頓。）

工作演示

http://jsbin.com/isicu（通過http://jsbin.com/isicu/edit編輯）

全部來源

的JavaScript

(function ($) { 
    $.fn.pulsate = function (properties, duration, type, speed, callback) { 
    type = type || 'Swing' 
    speed = speed || 'Normal'; 
    this.animate(properties, duration, 'pulsate' + type + speed, callback); 
    }; 

    function createPulsateLinear (speed) { 
    speed *= 2; 
    return function (p, n) { 
     return (Math.asin(Math.sin(Math.PI * n/speed)) + Math.PI/2)/Math.PI; 
    } 
    } 

    function createPulsateSwing (speed) { 
    return function (p, n) { 
     return (1 + Math.sin(n/speed))/2; 
    } 
    } 

    function createPulsateBounce (speed) { 
    speed *= 2; 
    return function (p, n) { 
     return (
     ((Math.asin(Math.sin(Math.PI * n/speed)) + Math.PI/2)/Math.PI) * 
     (Math.sin(Math.PI * n/speed) + 1)/-2 + 1 
    ); 
    } 
    } 

    var speeds = { 
    fast: 100, 
    normal: 200, 
    slow: 400 
    } 

    $.extend(jQuery.easing, { 
    pulsateLinearFast: createPulsateLinear(speeds.fast), 
    pulsateLinearNormal: createPulsateLinear(speeds.normal), 
    pulsateLinearSlow: createPulsateLinear(speeds.slow), 
    pulsateSwingFast: createPulsateSwing(speeds.fast), 
    pulsateSwingNormal: createPulsateSwing(speeds.normal), 
    pulsateSwingSlow: createPulsateSwing(speeds.slow), 
    pulsateBounceFast: createPulsateBounce(speeds.fast), 
    pulsateBounceNormal: createPulsateBounce(speeds.normal), 
    pulsateBounceSlow: createPulsateBounce(speeds.slow) 
    }); 
})(jQuery); 

$(document).ready(function() { 
    var 
    pulsatingBlocks = $('.pulsating-block'), 
    forever = 5 * 24 * 60 * 60 * 1000; // 5 days! (Which is forever in Internet time) 

    pulsatingBlocks.filter('.opacity').each(function() { 
    $(this).pulsate({opacity: 0.2}, forever, this.className.split(' ')[0], 'Slow'); 
    }); 

    pulsatingBlocks.filter('.top').each(function() { 
    $(this).pulsate({top: 100}, forever, this.className.split(' ')[0], 'Slow'); 
    }); 

});

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
<meta charset=utf-8 /> 
<title>Pulsate</title> 
<style> 
    div { clear: left; margin-bottom: 2em; } 
    .pulsating-block { 
    width: 6em; height: 4em; 
    margin: 0.5em; margin-right: 10em; 
    float: left; clear: none; position: relative; 
    background: lightblue; 
    text-align: center; 
    padding-top: 2em; 
    font: bold 1em sans-serif; 
    } 
</style> 
</head> 
<body> 
    <div> 
    <div class="Linear opacity pulsating-block">linear</div> 
    <div class="Swing opacity pulsating-block">swing</div> 
    <div class="Bounce opacity pulsating-block">bounce</div> 
    </div> 
    <div> 
    <div class="Linear top pulsating-block"></div> 
    <div class="Swing top pulsating-block"></div> 
    <div class="Bounce top pulsating-block"></div> 
    </div> 
</body> 
</html>

來源

2010-01-29 23:28:47 brianpeiris

謝謝，Brian！你的功能正是我想要最終達成的。我不知道如何編寫代碼，以便它可以處理的不僅僅是不透明，而是這樣做！我有點尷尬......事實證明，我看到的問題與代碼無關，而是與我的顯示器校準（！）無關。我使用的例子是一個黑色的塊在白色背景中淡入淡出。我的顯示器正在剪掉黑色的較低範圍，這看起來好像動畫暫時停止。衛生署！不過謝謝你，這個腳本正是我所需要的。太棒了！ – 2010-02-01 19:02:29

很高興我能幫到你。我認爲問題比技術更直觀。好的工作注意到它是你的顯示器，那是一個晦澀的「bug」：P – brianpeiris 2010-02-01 21:39:44

這可能是我見過的關於任何問題的最完整的答案之一。你的演示非常棒。 – 2010-11-16 16:30:58

嘗試

function pulsate() { 
     $("#pulsating-block").animate({opacity: 0.2}, 3000,function(){ 
      $(this).animate({opacity: 1}, 3000, null, function() {pulsate()}); 
     }); 
    }

來源

2010-01-29 18:37:53

感謝您的快速回復！不幸的是，這似乎並沒有解決我遇到的問題。（如果將持續時間縮短到500毫秒，則可能會更好地看到問題）問題是，在返回到100％不透明度後，動畫在開始再次調暗持續時間之前似乎停止。元素在開始變暗之前保持100％不透明度約一半或整秒。它似乎沒有停頓在20％的不透明度（這是我希望它工作的方式）。 – 2010-01-29 19:27:49

jQuery循環動畫每次都會暫停。如何避免暫停？

回答

工作演示

全部來源

的JavaScript

HTML

相關問題