CSS3 Div Animation Relative Spacing
Question
Recently I have asked a similar question about transition animation in divs. ( See this post )
The Code Snippet below shows my solution.
However, the animation only works if the width is given in pixels, not as a percentage .
Does anybody know a way around this?
EDIT (More info to clarify my problem):
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input.
Thus, the span of the left margin of the page would range from -100% to +100%.
I want a swiping animation so that the user can switch from page 2 (ie displaying an image) to page 3 (ie the text correlating to the image).
Because of different browser window sizes, I need the width to be in percentages. Sadly...
$(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>
2 answers
solution1
1 ACCPTED 2017-01-01 19:56:33
I have changed the left positioning for a transform on the individual elements:
Now, also, the class row is set to occupy full browser width. The container class is se to 300% (because it will make room for 3 elements). And the children are set to 33% of this, that at the end is 100% of the row.
var pos = 2; /* values 1 - 2 or 3 */ $(document).ready(function() { $(".next").click(function() { if (pos == 1) { $(".container").removeClass("pos1"); $(".container").addClass("pos2"); pos++; } else if (pos == 2) { $(".container").removeClass("pos2"); $(".container").addClass("pos3"); pos++; } }); $(".prev").click(function() { if (pos == 3) { $(".container").removeClass("pos3"); $(".container").addClass("pos2"); pos--; } else if (pos == 2) { $(".container").removeClass("pos2"); $(".container").addClass("pos1"); pos--; } }); });
.row { border: 1px solid black; height: 200px; margin: 0; width: 100%; padding: 0; display: block; position: relative; overflow: hidden; } .container { height: 200px; width: 300%; margin: 0; padding: 0; display: block; position: absolute; top: 0; } .ins { width: 33.33%; height: 200px; margin: 0; padding: 0; float: left; transition: transform 0.5s ease-in-out; } .div1 { background-color: red; } .div2 { background-color: green; } .div3 { background-color: blue; } .pos2 .ins { transform: translateX(-100%); } .pos3 .ins { transform: translateX(-200%); }
<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 pos2"> <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>
solution2
1 2017-01-01 20:02:15
Narusan,
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. You can set a percentage value, but it seems it will not then return those percentages to you.
I changed your code some to demonstrate this:
$(document).ready(function() { $(".next").click(function() { var current = $(".container").css("left"); console.log(current); if (current == "-200px" || current == "-100%") { current = "-200%"; } else if (current == "0%") { current = "-100%"; } $(".container").css("left", current); }); $(".prev").click(function() { var current = $(".container").css("left"); console.log(current); if (current == "-200px" || current == "-100%") { current = "0%"; } else if (current == "-200%") { current = "-100%"; } $(".container").css("left", current); }); });
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element.
Approaching the problem very differently, like vals did, seems like a good approach.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.