清理簡單的動畫jQuery代碼

Question

我想在有限的時間內快速連續地向上和向下動畫一個div。這工作在jquery使它發生，但它是如此凌亂：

$('.wiggle').delay(1800).show(50).animate({ 
       top: '15' 
           }, 40, function() { 
           $('.wiggle').animate({ 
           top: '12' 
           }, 40, function() { 
            $('.wiggle').animate({ 
            top: '15' 
            }, 40, function() { 
             $('.wiggle').animate({ 
             top: '12' 
             }, 40, function() { 
              $('.wiggle').animate({ 
              top: '15' 
              }, 40, function() { 
               $('.wiggle').animate({ 
               top: '12' 
               }, 40, function() { 
                $('.wiggle').animate({ 
                top: '15' 
                }, 40, function() { 
                 $('.wiggle').animate({ 
                 top: '12' 
                 }, 40, function() { 
                  $('.wiggle').animate({ 
                  top: '15' 
                  }, 40, function() { 
                   $('.wiggle').animate({ 
                   top: '12' 
                   }, 40, function() { 
                    $('.wiggle').animate({ 
                    top: '14' 
                    }, 40, function() { 
                     $('.wiggle').hide(50) 
                    }); 
                   }); 
                  }); 
                 }); 
                }); 
               }); 
              }); 
             }); 
            }); 
           }); 
          }); //end wiggle 

我知道這是不好的。我想創建一個獨特的功能來實現這一點，但是我失去了從何處開始。

Answer 1

我建議你決定整體多久你想的效果運行，然後封裝行動統一到一個單一的功能，將照顧遞歸的和停止：

function wiggle(selector, duration_of_wiggle) { 
    var wiggle_active = true; 
    var target = $(selector); 
    setTimeout(function() { 
     wiggle_active = false; 
     target.hide(); 
    }, duration_of_wiggle); 
    var one_wiggle_down = function() { 
     if (!wiggle_active) 
      return; 
     target.animate({ 
      top: '15' 
     }, 40, one_wiggle_up); 
    };  
    var one_wiggle_up = function() { 
     if (!wiggle_active) 
      return; 
     target.animate({ 
      top: '12' 
     }, 40, one_wiggle_down); 
    }; 
    one_wiggle_down(); 
}; 

wiggle('.wiggle', 1000); 

這裏試試：http://jsfiddle.net/P4H9c/1/

Answer 2

開始通過保存到一個變種選擇該給予的更好的性能

var $wiggle = $('.wiggle'); 

$wiggle.delay(1800).show(50).animate({ 
      top: '15' 
          }, 40, function() { 
          $wiggle.animate({ //and so on.. 

二提高選擇的對象。如果與它的送花兒給人的元素相關的HTML是一樣的，讓我們一div你能做到這一點

var $wiggle = $('div.wiggle') 

第三，我在你的代碼中看到你要完成一個反彈效應或將向下和向上裹在方法的功能和類似

function bounce(wiggle) { 
    for (i = 1; i < 5; i++) { 
     if (i % 2 == 0) { 
     wiggle.animate({ 
      top: '12px' 
     }, 75); 
    } 
    else if (i % 3 == 0) { 
     paquete.animate({ 
      top: '15px' 
     }, 75); 
    } 
    } 
    wiggle.hide(); 
} 

然後你只需調用的函數

var $wiggle = $('.wiggle'); 

bounce($wiggle); 

Answer 3

未經檢驗的做了，但我認爲你必須設置一個福nction類似於下面的東西（不知道這不正是你想要什麼，因爲它是相當難以啓齒的「爛攤子」，但它應該給你一個想法）：

function doWiggle($elem, numberOfTimesToWiggle) 
{ 
    $elem.animate({ 
     top: '15' 
    }, 40, function() { 
     top: '12' 
    }, 40, function() { 
     doWiggle($elem, (numberOfTimesToWiggle-1)); 
    }); 

} 

setTimeout(function() { 
    show(5); 
    doWiggle($('.wiggle'), 20); 
},1000); 

Answer 4

$('.wiggle').delay(1800).show(50).wiggle(12); 

$.fn.wiggle = function(i) { 

    var $elem = $(this); 

    if (i > 0) { 

     $elem.animate({ 
      top: i % 2 == 0 ? 15 : 12 
     }, 40, function() { 

      $elem.wiggle(i--); 
     }); 
    } 
}