清理简单的动画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--); 
     }); 
    } 
}