0

我搜索了这个主题并找到了一些回复，但它们似乎不适用于我的代码。我的部分代码是这样的：

var direction = "left";
var speedvar = 3000;
var container_w = parseInt($("#lr-s").width());

$("#lr-s ul#"+number).animate({"left": "-="+container_w}, speedvar, "linear", function() {});

如果我手动设置方向，它可以正常工作，但是当我这样做时：

$("#lr-s ul#"+number).animate({direction: "-="+container_w}, speedvar, "linear", function() {});

放置“方向”变量 dosnt 似乎有效。我需要改变方向（“左”、“右”、“下”、“上”），所以改变符号 -= for += dosnt 适合我。我也试过：

var settings = {};
settings[direction] = container_w;
$("#lr-s ul#"+number).animate(settings, speedvar, "linear", function() {});

和

var settings = {"left": "-="+container_w};
$("#lr-s ul#"+number).animate(settings, speedvar, "linear", function() {});

没有任何东西适用于方向的变量。手动更改方向可以，但我想设置一个变量来简化插件用户的方向更改。请帮忙。谢谢。

4

2 回答 2

1

以下是一些使它起作用的注意事项：

1）使用动态分配的属性名称构建对象的正确方法：

var settings = {};
settings[direction] = scrollAmount;
$("#lr-s ul#"+number).animate(settings, speedvar, "linear", function() {});

2）不要忘记在开始动画“相反”属性后重置当前动画属性。如果将两个相反的属性分配给一个元素，浏览器会使用“优先”属性来定位该元素。这意味着“左”属性胜过“右”，“上”胜过“下”。

$('#bullet').css('left', '');

这是一个示例：html：

<div style="position:relative; margin-top:100px; height:100px; background-color:Yellow;">
    <p id="ship" style="position:absolute;">ship</p>
</div>

<button type="button" onclick="Anim.changeDir();">change direction</button>

脚本：

    $(function () {
        Anim.start('left', '+=500');
    });

    var Anim = {

        lastDir: 'left',
        lastShift: '+=500',

        $el: function () {
            return $('#ship');
        },

        start: function (dir, shift) {

            dir = dir || (this.lastDir == 'left' ? 'right' : 'left');
            shift = shift || this.lastShift;

            var prop = {};
            prop[dir] = shift;
            this.$el().animate(prop, 5000);

            if (this.lastDir) {
                this.$el().css(this.lastDir, '');
            }

            this.lastDir = dir;
            this.lastShift = shift;
        },

        stop: function () {
            this.$el().stop();
            return this;
        },

        changeDir: function () { 
            this.stop();
            this.start();
        }
    }
于 2012-07-13T20:55:08.253 回答
0 
switch (direction){
        case 'right':
            jQuery(element).animate({ 'right': offset }, 500, 'easeOutCubic');
            break;
        default:
            break;
    }
于 2014-07-15T08:37:51.207 回答