CODEWITHSUNDEEP
jquery
Jonathan Calb
Jonathan Calb

Reputation: 761

Change animation direction with variable in jQuery

I searched this topics and i find some responses but they didnt seem to work for my code. Part of my code is this:

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

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

If i set the direction manually it works ok, but when i do this:

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

Putting the "direction" variable dosnt seem to work. I need that the direction changes ("left, "right", "bottom", "top") so changing the symbol -= for += dosnt fit for me. I also tried:

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

and

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

Nothing worked with variables for the direction. Changin the direction manually works ok but i want to set a variable to simplify changing the direction for the user of the plugin. Help please. Thanks.

Upvotes: 0

Views: 1561

Answers (2)

Paul Bönisch
Paul Bönisch

Reputation: 294

switch (direction){
        case 'right':
            jQuery(element).animate({ 'right': offset }, 500, 'easeOutCubic');
            break;
        default:
            break;
    }

Upvotes: 0

Rustam
Rustam

Reputation: 746

here are some notes to make it work:

1) the correct way to build an object with dynamically assigned property names:

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

2) don't forget to reset currently animated property after you start to animate 'opposite' property. In case when two opposite properties got assigned to an element, a browser uses 'prioritized' properties to position this element. It means 'left' property wins over 'right', and 'top' wins over 'bottom'.

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

Here is an example: 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>

script:

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

Upvotes: 1

Related Questions