Question

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

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

我尝试了下面的内容，但它不起作用：（

$(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;


 }

});

非常感谢你的帮助。

Answer 1

您也可以选择以下内容：

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

然后这样称呼：

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

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

Answer 2

尝试

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

});

Answer 3

例如

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

});

Answer 4

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

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

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

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

4 个答案: