使用追加动画移动元素

Question

我希望页面上的一个元素在您滚动到某个高度时通过“移动”动画从 Jumbotron 移动到导航栏。

我已经设法通过在导航栏中设置 div class="logo-top" 和在 jumbotron 中设置 div class="logo-hero" 来实现这一点，并且我正在使用 append 更改父类图片 (#logo) 将其从 jumbotron 移动到导航栏，并相应地更改其大小

我试图 append.animate 没有成功。

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");
    }
}

问题是动画不是“移动”而是调整大小。如何实现“移动”动画效果？

Answer 1

移动？你的意思是从左到右？这你可以用“左” 例如

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

// 更新： 我为所有需要这种东西的人做了一个小例子，只要满足你的需要......

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