Question

当页面滚动到某个高度时，我希望页面上的元素以“移动”动画的形式从超大屏幕移动到导航栏。

我已经通过在导航栏中设置div class =“ logo-top”和在巨型飞机中设置div class =“ logo-hero”来实现这一目标，并且我正在使用append更改父类图像（#logo）的图像，将其从超大屏幕移动到导航栏，并同样更改其大小

我尝试添加动画。但是没有成功。

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/

使用append

1 个答案: