Làm cách nào để có thể thực hiện nhiều hiệu ứng jquery đồng thời?

Question

Tôi đang làm động một số yếu tố lỗi/xác thực trên một trang. Tôi muốn họ bị trả lại và được đánh dấu, nhưng cùng một lúc nếu có thể. Dưới đây là những gì tôi hiện đang làm:

var els = $(".errorMsg"); 
els.effect("bounce", {times: 5}, 100); 
els.effect("highlight", {color: "#ffb0aa"}, 300); 

Điều này khiến các phần tử bị trả lại đầu tiên, và THEN được tô sáng và tôi muốn chúng xuất hiện đồng thời. Tôi biết rằng với .animate() bạn có thể chỉ định queue:false trong các tùy chọn, nhưng tôi không muốn sử dụng ảnh động vì hiệu ứng dựng sẵn "thoát" và "đánh dấu" chính xác là những gì tôi muốn.

Tôi đã thử chỉ đơn giản là chuỗi các cuộc gọi như els.effect().effect() và điều đó không hiệu quả. Tôi cũng đã cố gắng để đặt queue:false trong các đối tượng tùy chọn tôi vượt qua, và điều đó không hoạt động.

Answer 1

Ok, vì vậy đây là giải pháp rất tùy chỉnh kết hợp hiệu ứng phản hồi và đánh dấu. Tôi muốn nhìn thấy một số loại hỗ trợ jquery để kết hợp các dễ dàng hơn, xác định {queue: false}, nhưng tôi không nghĩ rằng nó đơn giản.

Những gì tôi đã làm là lấy jquery.effects.bounce.js và jquery.effects.highlight.js (từ jquery-ui-1.8rc3), và kết hợp các mã của hai như Daves đề nghị, để tạo ra một mới hiệu ứng có tên "hibounce". Trong thử nghiệm của tôi, nó hỗ trợ tất cả các tùy chọn của cả hai, và chúng xảy ra đồng thời. No trông tuyệt! Tôi không phải là lớn fan hâm mộ của các giải pháp như thế này mặc dù, vì yếu tố bảo trì. Bất cứ khi nào tôi nâng cấp jquery.ui, tôi cũng sẽ phải cập nhật tệp này theo cách thủ công.

Dù sao, đây là kết quả kết hợp (jquery.effects.hibounce.js)

(function($) { 

$.effects.hibounce = function(o) { 
    return this.queue(function() { 
     // Highlight and bounce parts, combined 
     var el = $(this), 
      props = ['position','top','left','backgroundImage', 'backgroundColor', 'opacity'], 
      mode = $.effects.setMode(el, o.options.mode || 'show'), 
      animation = { 
       backgroundColor: el.css('backgroundColor') 
      }; 

     // From highlight 
     if (mode == 'hide') { 
      animation.opacity = 0; 
     } 

     $.effects.save(el, props); 

     // From bounce 
     // Set options 
     var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode 
     var direction = o.options.direction || 'up'; // Default direction 
     var distance = o.options.distance || 20; // Default distance 
     var times = o.options.times || 5; // Default # of times 
     var speed = o.duration || 250; // Default speed per bounce 
     if (/show|hide/.test(mode)) props.push('opacity'); // Avoid touching opacity to prevent clearType and PNG issues in IE 


     // Adjust 
     $.effects.save(el, props); el.show(); // Save & Show 
     $.effects.createWrapper(el); // Create Wrapper 
     var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left'; 
     var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg'; 
     var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true})/3 : el.outerWidth({margin:true})/3); 
     if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift 
     if (mode == 'hide') distance = distance/(times * 2); 
     if (mode != 'hide') times--; 

     // from highlight 
     el 
      .show() 
      .css({ 
       backgroundImage: 'none', 
       backgroundColor: o.options.color || '#ffff99' 
      }) 
      .animate(animation, { 
       queue: false, 
       duration: o.duration * times * 1.3, // cause the hilight to finish just after the bounces (looks best) 
       easing: o.options.easing, 
       complete: function() { 
        (mode == 'hide' && el.hide()); 
        $.effects.restore(el, props); 
        (mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter')); 
        (o.callback && o.callback.apply(this, arguments)); 
        el.dequeue(); 
       } 
      }); 

     // Animate bounces 
     if (mode == 'show') { // Show Bounce 
      var animation = {opacity: 1}; 
      animation[ref] = (motion == 'pos' ? '+=' : '-=') + distance; 
      el.animate(animation, speed/2, o.options.easing); 
      distance = distance/2; 
      times--; 
     }; 
     for (var i = 0; i < times; i++) { // Bounces 
      var animation1 = {}, animation2 = {}; 
      animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance; 
      animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance; 
      el.animate(animation1, speed/2, o.options.easing).animate(animation2, speed/2, o.options.easing); 
      distance = (mode == 'hide') ? distance * 2 : distance/2; 
     }; 
     if (mode == 'hide') { // Last Bounce 
      var animation = {opacity: 0}; 
      animation[ref] = (motion == 'pos' ? '-=' : '+=') + distance; 
      el.animate(animation, speed/2, o.options.easing, function(){ 
       el.hide(); // Hide 
       $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore 
       if(o.callback) o.callback.apply(this, arguments); // Callback 
      }); 
     } else { 
      var animation1 = {}, animation2 = {}; 
      animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance; 
      animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance; 
      el.animate(animation1, speed/2, o.options.easing).animate(animation2, speed/2, o.options.easing, function(){ 
       $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore 
       if(o.callback) o.callback.apply(this, arguments); // Callback 
      }); 
     }; 
     el.queue('fx', function() { el.dequeue(); }); 
     el.dequeue(); 
    }); 
}; 

})(jQuery); 

Nó có thể được sử dụng như bất kỳ hiệu ứng khác bây giờ:

var el = $("#div1"); 
el.effect("hibounce", {color: "#F00", times: 5}, 100); 

Answer 2

Bạn có thể thử này:

var els = $(".errorMsg"); 
setTimeout(function() { 
    els.effect("bounce", {times: 5}, 100); 
}, 1); 
setTimeout(function() { 
    els.effect("highlight", {color: "#ffb0aa"}, 300); 
}, 1); 

Điều đó sẽ gọi cả hai tác dụng ở khoảng thời, đồng bộ.

Answer 3

Hiệu ứng hàng đợi hiệu ứng của giao diện người dùng jQuery, vì vậy hãy viết phiên bản của riêng bạn về chức năng phản hồi/đánh dấu. Chỉ cần sao chép mã nguồn từ cả hai vào một chức năng duy nhất, dọn sạch mã, và mỗi khi nó gọi là animate, hãy chắc chắn để có trả lại và nổi bật logic trong đó với nhau.

Answer 4

jQuery UI sẽ xếp hàng những ảnh hưởng theo mặc định. Sử dụng dequeue() để chạy đồng thời:

var opt = {duration: 7000}; 

    $('#lbl').effect('highlight', opt).dequeue().effect('bounce', opt); 

Demo in JsFiddle