CODEWITHSUNDEEP
javascriptjquery
Dimon
Dimon

Reputation: 454

Animate moving an element using append

I want an element on the page to move from the Jumbotron to the navbar with a "moving" animation when you scroll to a certain height.

i have managed to accomplish that by setting up a div class="logo-top" in the navbar, and a div class="logo-hero" inside the jumbotron, and i'm using append to change the parent class of the image (#logo) to move it from the jumbotron to the navbar and likewise and change its size accordingly

I have tried to append.animate with no success.

var moved = false;
var logo = $("#logo");
var logo1 = logo.clone();


$(window).scroll(function () {
    var vertical_position = 0;
    if (pageYOffset)//usual
        vertical_position = pageYOffset;
    else if (document.documentElement.clientHeight)//ie
        vertical_position = document.documentElement.scrollTop;
    else if (document.body)//ie quirks
        vertical_position = document.body.scrollTop;


    if (vertical_position > 120) {
        moveLogoUp(moved);
        moved = true;
    }
    else if (vertical_position < 120 && moved === true) {
        moveLogoDown(moved);
        moved = false;
    }
});


function moveLogoUp(moved) {
    if (!moved) {
        logo.animate({
            "width": 125
        }, "slow");
        logo1.css("visibility", "hidden");
        $(".logo-top").append(logo);
        $(".logo-hero").append(logo1);
    }
}

function moveLogoDown(moved) {
    if (moved) {
        $(".logo-hero").append(logo);
        logo.animate({
            "width": "20rem"
        }, "slow");
        logo1.remove();
        $(".logo-hero").append(logo);
        console.log("moveLogoDown done");
    }
}

The problem is the animation are not "moving" but just resizing. how can i accomplish the "move" animation effect?

Upvotes: 0

Views: 259

Answers (1)

Toxi
Toxi

Reputation: 109

Move? Did you mean from left to rigth? This u can to with "left" e.g.

logo.animate({
    top: 400,
    width: 125,
    left: 100,
}, "slow");

// update: i´ve made a little example for all who can need somthing like this, just handle to your needs...

https://jsfiddle.net/o5hjrbcd/6/

Upvotes: 1

Related Questions