JQuery 动画到基于 vw 的位置

Question

I have a title whos position from the top of the page is based on margin-top with a vw value.

.name_slogan {
width: 1000px;
margin: auto;
z-index: 1;
margin-top:7vw;
}

I'd like this title to move in from above and then have the title margin-top behave as a vw normally would. Meaning it grows and shrinks as the window is resized.

So far, I have moved the div off the page on page load:

$('.name_slogan').css({
    position: 'relative',
    top: '-300px'
});

And then I can bring it back on to a set position:

$('.name_slogan').animate({top: "200px"}, 5000); 

But then, of course, vw does not work. So if possible, I'd like something like this non working code:

$('.name_slogan').animate({top: "7vw"}, 5000); 

Answer 1

jQuery 可以自行访问您的视口尺寸 - 您应该能够做到

$('.name_slogan').animate({top: $(window).width()*0.07}, 5000);