jquery - Измените положение справа от div на загрузке документа

Question

У меня есть div, который я хочу сначала скрыть, когда документ загружен, и анимировать его так, чтобы он выглядел так, как будто он выталкивает извне.

Мой HTML прост:

<div></div> 

И CSS:

div 
{ 
    position: absolute; 
    right:-10000px; 
} 

JQuery, как:

$(".whyus").animate({ 
    right:"50px" 
},5000); 

ДИВ изначально имеющий right:-10000px;, чтобы получить его полностью из страницы. Я хочу, чтобы, если страница загружена, div будет анимироваться через 5 секунд на странице с правильным значением всего 50px. Как я могу заставить это работать?

Answer 1

Вам не нужно указывать right:-10000px;. Вы можете сделать right:-10vw;

Jsfiddle

$("div").animate({ 
 
    right: "50px" 
 
}, 5000);

body { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
div { 
 
    position: absolute; 
 
    right:-100vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div>test</div>

Answer 2

Ваш код работает отлично для меня!

Просто изменил CSS, чтобы сделать вещи видимым:

div { 
    position: absolute; 
    right:-50px; 
    //bit realistic height:100px; 
    width:50px; 
    border:1 px solid; 
    background-color:red; 
} 

Я сделал это для вас fiddle

Смотрите, если это помогает

Answer 3

Я сделал это fiddle для вас. Надеюсь это поможет.

Просто необходимо включить

$(document).ready(function(){ 
    $('.whyus').animate({right: "+=500px",}, 5000); 
});