2011-08-28 21 views

回答

31

,我建議你不要使用jQueryUI的在所有的這一點 - 這是一個非常簡單的動畫,並且可以不加載UI很容易做到:

// DOM ready 
$(function(){ 
    // Self-executing recursive animation 
    (function pulse(){ 
     $('#my_div').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse); 
    })(); 
}); 

工作演示http://jsfiddle.net/AlienWebguy/bSWMC/

正如你可以看到,它可以通過改變淡入淡出的速度和延遲的持續時間來輕鬆調整。

原來jQueryUI的pulsate()函數使用for環路times,所以你不能在不改變插件的邏輯使用這個插件實現你的結果:

$.effects.pulsate = function(o) { 
    return this.queue(function() { 
     var elem = $(this), 
      mode = $.effects.setMode(elem, o.options.mode || 'show'); 
      times = ((o.options.times || 5) * 2) - 1; 
      duration = o.duration ? o.duration/2 : $.fx.speeds._default/2, 
      isVisible = elem.is(':visible'), 
      animateTo = 0; 

     if (!isVisible) { 
      elem.css('opacity', 0).show(); 
      animateTo = 1; 
     } 

     if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) { 
      times--; 
     } 

     for (var i = 0; i < times; i++) { 
      elem.animate({ opacity: animateTo }, duration, o.options.easing); 
      animateTo = (animateTo + 1) % 2; 
     } 

     elem.animate({ opacity: animateTo }, duration, o.options.easing, function() { 
      if (animateTo == 0) { 
       elem.hide(); 
      } 
      (o.callback && o.callback.apply(this, arguments)); 
     }); 

     elem 
      .queue('fx', function() { elem.dequeue(); }) 
      .dequeue(); 
    }); 
}; 
+0

您有什麼建議? – Jordy

+1

查看更新代碼 – AlienWebguy

+0

哇,謝謝。最後一個問題,如果我使用淡入,淡出示例,該元素會在幾毫秒內消失,但淡入淡出元素下的所有元素都會上下移動。對不起,我的英語;-),所以有可能這個元素淡入淡出而不消失? – Jordy

-3

只是瘋狂的猜測,但我會嘗試0或-1。如果這沒有幫助,您可以添加一個接近無限的值,可能是1000000或其他值。

10

jordy,你可以用裏面的一個函數來完成上面的脈動。

//the function 
function pulsateforever(){ 
$("element").effect("pulsate", { times:1 }, pulsatetime,function(){ 
//repeat after pulsating 
pulsateforever(); 
}); 
} 
//call function when DOM is ready 
$(function(){ 
pulsateforever(); 
}); 

確保您更換元素與要跳動的元素,pulsatetime在你希望它跳動的速度。

+1

+1這絕對會工作,但正如我提到的這不應該使用JQueryUI--一個簡單的'$('element')。fadeOut('slow')。delay(500).fadeIn('slow',recursion ..)'我認爲是最優的。 – AlienWebguy

+0

好的,我該怎麼辦?不要使用用戶界面脈衝,但淡入和退出?感謝幫助;-)! – Jordy

+0

查看我更新的帖子以獲得解釋 – AlienWebguy

1

看看這個新plugin

像魅力一樣工作,脈動效果適用於所有瀏覽器。

2

基於關閉AlienWebguy的答案,但沒有「隱藏」和「秀」荷蘭國際集團的元素,而不僅僅是動畫的不透明度:

(function pulse(){ 
      $("#elem").delay(200).animate({'opacity':1}).delay(500).animate({'opacity':0},pulse); 
     })(); 
+1

這是相當不錯和簡單,做這項工作 –