如何重复使用相同的函数或变量 - jQuery

时间:2014-01-27 12:01:51

标签: jquery

我想这是一个相当微不足道的问题。

如何为“动画”创建全局函数,以便我不必重复代码?

我尝试了下面的内容,但它不起作用:(

$(document).ready(function(){ 

 var animate = ['one','two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];

 //i'd like use this repeatedly
 var animateThis = animate({"margin-top":"10px"});


 for(var i=0; i < animate.length; i ++){

      $('.'+animate[0]).animateThis;// this does not work :(
      $('.'+animate[2]).animateThis;

      $('.'+animate[4]).animateThis;
      $('.'+animate[6]).animateThis;


 }

});

非常感谢你的帮助。

4 个答案:

答案 0 :(得分:3)

您也可以选择以下内容:

jQuery.fn.animateMyMargin= function () {
    $(this).animate({"margin-top":"10px"});
};

然后这样称呼:

$('.myClassForAllElements').animateMyMargin();

猜测它比循环数组更干嘛和jQuery-。

答案 1 :(得分:1)

尝试

$(document).ready(function () {

    var animate = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];

    //i'd like use this repeatedly
    var animateThis = function (el) {
        el.animate({
            "margin-top": "10px"
        });
    }


    for (var i = 0; i < animate.length; i++) {
        animateThis($('.' + animate[0]));
        animateThis($('.' + animate[2]));
        animateThis($('.' + animate[4]));
        animateThis($('.' + animate[5]));
    }

});

答案 2 :(得分:1)

例如

$(document).ready(function() {

var a = $('#div1');
var b = $('.classes1');
var c = $('#div2');
var d = $('#nav li');

function animate(x) {
    x.animate({'margin-top': '10px'}, 900);
}

animate(a);
animate(c);

});

答案 3 :(得分:1)

创建一个包含执行动画的代码的函数,然后在for循环中调用它:

function animateThis(element) {
    return $(element).animate({"margin-top": "10px"});
}

for(var i=0; i < animate.length; i ++){    
      animateThis($('.'+animate[i]));
 }