我使用Pulsate函數(http://docs.jquery.com/UI/Effects/Pulsate)。有了「時間」這個論點,我可以設置元素脈動的時間。默認值是5,但我怎樣才能設置它的元素將無限脈動。Jquery Pulsate Times
回答
,我建議你不要使用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或-1。如果這沒有幫助,您可以添加一個接近無限的值,可能是1000000或其他值。
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這絕對會工作,但正如我提到的這不應該使用JQueryUI--一個簡單的'$('element')。fadeOut('slow')。delay(500).fadeIn('slow',recursion ..)'我認爲是最優的。 – AlienWebguy
好的,我該怎麼辦?不要使用用戶界面脈衝,但淡入和退出?感謝幫助;-)! – Jordy
查看我更新的帖子以獲得解釋 – AlienWebguy
看看這個新plugin
像魅力一樣工作,脈動效果適用於所有瀏覽器。
基於關閉AlienWebguy的答案,但沒有「隱藏」和「秀」荷蘭國際集團的元素,而不僅僅是動畫的不透明度:
(function pulse(){
$("#elem").delay(200).animate({'opacity':1}).delay(500).animate({'opacity':0},pulse);
})();
這是相當不錯和簡單,做這項工作 –
- 1. jQuery pulsate div
- 2. jQuery scale pulsate
- 3. 禁用'pulsate'
- 4. CSS3 Transform Opacity Pulsate
- 5. 在Chrome中使用jQuery UI Pulsate
- 6. DateTimeOffset&UTC&Loct times in MVC4 - jQuery
- 7. 在.live()下運行$(element).pulsate()
- 8. pulsate不能在每個div上工作
- 9. unstable tcp receive times
- 10. Profile_OnMigrateAnonymous event firing times
- 11. isAuthorized Error ... cakefolder/two times
- 12. Times 10個用戶權限
- 13. php vs txt display - courier and times
- 14. Order Strings as Times in Dictionary
- 15. 字體'Times New Roman'不支持style'Regular'
- 16. 如何比較$(元素)的.html()== 「×」
- 17. rails link_to_add repeat div at at 5 times
- 18. gnuplot angstrom與Times-Roman字體的標籤
- 19. .times block not working。怎麼來的?
- 20. kendoUI grid-command-click-event-triggered-multiple-times
- 21. JMockIt中的times()的等價物?
- 22. Partial in rails 3 application render:per_page times while using will_paginate
- 23. 嵌套形式不建到4.times
- 24. times一個文件的讀寫操作
- 25. Gradle 4.times。美元是什麼?
- 26. 3.times each.do然後添加類
- 27. VSTO Windows Hook keydown event called 10 times
- 28. 在PictureBox中打印圖像multiplier times
- 29. R chron times()函數將不起作用
- 30. 字體proxima_novalight呈現爲Times New Roman
您有什麼建議? – Jordy
查看更新代碼 – AlienWebguy
哇,謝謝。最後一個問題,如果我使用淡入,淡出示例,該元素會在幾毫秒內消失,但淡入淡出元素下的所有元素都會上下移動。對不起,我的英語;-),所以有可能這個元素淡入淡出而不消失? – Jordy