Question

这里是小提琴http://jsfiddle.net/SunMercury/pmhFv/

如何首先声明对象id和startValueX，startValueY，endValueX，endValueY

那么它会使用我声明的值进行动画处理吗？

animateMe（$（'＃box1'），2000）;

到

animateMe（$（'＃box1'），startValueX，startValueY，endValueX，endValueY，2000）;

Answer 1

你几乎拥有它...只需将你的参数添加到你的函数声明中，并用这些参数名替换函数中的硬编码值：

var animateMe = function(targetElement, sX, sY, eX, eY, speed){
    $(targetElement).css({ left: sX+"px", top: sY+"px" }).fadeIn(200, function() {
        $(targetElement).animate({
            'left': eX+"px",
            'top': eY+"px"
        }, {
            duration: speed,
            complete: function() {
                $(this).fadeOut(200, function() {
                    animateMe(this, sX, sY, eX, eY, speed);
                })
            }
        }).fadeOut(200);
    });
};

animateMe($('#box1'), 300, 400, 40, 50, 2000);

http://jsfiddle.net/bQVUH/

Answer 2

您可以$.extend()提供默认选项。顺便说一下，你将targetElement包装在jQuery中两次。

var animateMe = function($el, options) {
    var o = $.extend({
        speed: 2000,
        startX: 0,
        startY: 0,
        endX: 100,
        endY: 100
    }, options);
    $el.css({
        left: o.startX,
        top: o.startY
    }).fadeIn(200, function() {
        $el.animate({
            'left': o.endX,
            'top': o.endY
        }, {
            duration: o.speed,
            complete: function() {
                $(this).fadeOut(200, function() {
                    animateMe(this, { speed: o.speed });
                });
            }
        }).fadeOut(200);
    });
};

// And then you run it like so

animateMe($('#el'), {
    speed: 3000,
    startX: 100,
    startY: 100,
    endX: 500,
    endY: 500
});

jQuery使用声明的位置为对象设置动画

2 个答案: