Jquery Pulsate Times

Question

Tôi sử dụng hàm Pulsate (http://docs.jquery.com/UI/Effects/Pulsate). Với đối số 'lần' tôi có thể thiết lập thời gian mà phần tử đó rung lên. Giá trị mặc định là 5, nhưng làm thế nào tôi có thể thiết lập nó rằng phần tử sẽ đập vô hạn.

Answer 1

tôi khuyên bạn không sử dụng jQueryUI ở tất cả cho điều này - đó là một hình ảnh động rất đơn giản và có thể dễ dàng thực hiện mà không tải UI:

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

Làm việc bản demo: http://jsfiddle.net/AlienWebguy/bSWMC/

Như bạn có thể thấy, nó có thể được tinh chỉnh khá dễ dàng bằng cách thay đổi tốc độ của sự mất dần và thời gian của sự chậm trễ.

Bản gốc jQueryUI pulsate() chức năng sử dụng một vòng lặp for cho times nên bạn không thể đạt được kết quả của bạn sử dụng plugin này mà không thay đổi logic của plugin:

$.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(); 
    }); 
}; 

Answer 2

Chỉ là phỏng đoán hoang dã, nhưng tôi muốn thử 0 hoặc -1. Nếu điều này không giúp được gì, bạn có thể chỉ cần thêm một giá trị gần như không giới hạn, có thể là 1000000 hoặc cái gì đó.

Answer 3

Jordy, bạn có thể sử dụng đặt xung trong một hàm để thực hiện điều này.

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

Hãy chắc chắn rằng bạn thay thế yếu tố với các yếu tố bạn muốn pulsate, và pulsatetime với tốc độ mà bạn muốn nó co giãn theo nhịp.

Answer 4

Check-out này mới plugin

Các công trình như nét duyên dáng và hiệu ứng xung hoạt động trên tất cả các trình duyệt.

Answer 5

Dựa tắt của câu trả lời AlienWebguy, nhưng mà không "ẩn" và "show" ing yếu tố, thay vì chỉ hoạt cảnh opacity:

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