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

「方向」変数を入れてもうまくいかないようです。方向を変更する必要があるため (「左、右」、「下」、「上」)、記号 -= を += に変更すると、私には合いません。私も試しました:

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）'opposite'プロパティのアニメーション化を開始した後、現在アニメーション化されているプロパティをリセットすることを忘れないでください。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 に答える