Недавно я задал аналогичный вопрос о анимации перехода в divs. (See this post)CSS3 Div Анимация Относительное расстояние
В приведенном ниже фрагменте кода показано мое решение.
Однако анимация работает только в том случае, если ширина задана в пикселях, а не в процентах.
Кто-нибудь знает об этом?
EDIT (Более подробную информацию, чтобы уточнить мою проблему):
В этом разделе веб-сайта, у меня есть заголовок, который всегда должен оставаться таким же и 3 страниц контента, которые могут быть «прокатывается» на входе пользователя.
Таким образом, диапазон левого поля страницы будет варьироваться от -100% до + 100%.
Я хочу, чтобы анимация показала, что пользователь может перейти со страницы 2 (т. Е. Отобразить изображение) на страницу 3 (то есть текст, соответствующий изображению).
Из-за разных размеров окна браузера мне нужна ширина в процентах. К сожалению ...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
Каковы процентные значения, которые следует заменить единицами 'px'? – guest271314
100% (я хочу, чтобы он заполнил полное окно браузера) шириной и где-то около 80% высоты. – Narusan