I'm trying to create a function that can slide div's from left or right based on what step you are in the process.
This is my basic structure:
<button type="submit" id="button1">Go to Step 1</button>
<button type="submit" id="button2">Go to Step 2</button>
<button type="submit" id="button3">Go to Step 3</button>
<div id="container">
<div id="div1">Text 1</div>
<div id="div2">Text 2</div>
<div id="div3">Text 3</div>
</div>
Using jQuery I have this, but it's not what I want:
$('#div1').animate({'width': 0}, 500,function(){ // Slides DIV to left
$('#div1').css('display','none');
$('#div1').css('width', 1100); // Set the correct with on DIV again
$('#div2').fadeIn('slow'); // Fade in new DIV
});
What I'm after is when I'm in Step 1 and press button two (Go to Step 2) I want div2 to slide in from the right (inside the container-div). When I'm in Step 3 and press button one (Go to Step 1) I want div1 to slide in from the left (inside the container-div) without seeing div2 on the way over. I'we looked at different jQuery sliders but they all handle pictures.
Here is an example that does something along the lines what I what to achieve but does not have the left/right slide functionality: http://jsfiddle.net/andrewwhitaker/2uV2h/ (source: How to Slide div's off/on page using jQuery ). Please ask questions if something is unclear :) Thanks in advanced.
JSFIDDLE: https://jsfiddle.net/t5qnw5v5/3/
I would recommend to use http://jquery.malsup.com/cycle2/demo/non-image.php You can slide div's not only images. You don't have to implement sliding with custom code.
nkwinder already posted an answer with a jQuery plugin, but I went ahead and cut jQuery completely out of the question, I don't know if you prefer that, but if you want that solution, it is here https://jsfiddle.net/3ydpa3oL/ , I may have even modified your jsfiddle, no idea how does that page work.
What I did:
I put another element inside of #container, so that it contains all of the .boxes and named it #slider.
<div id="container">
<div id="slider"> <!-- NEW ELEMENT NEEDED -->
<div id="div1" class="boxes">Text 1</div>
<div id="div2" class="boxes">Text 2</div>
<div id="div3" class="boxes">Text 3</div>
</div>
</div>
.boxes
{
width: 50px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
height: 20px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
font-size: 1em; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
float: left; // SO THAT THEY SLIDE LEFT AND RIGHT
}
#container
{
width: 50px; // WINDOW EFFECT
height: 20px; // WINDOW EFFECT
display: block;
overflow: hidden; // WINDOW EFFECT
}
#slider
{
position: relative;
width: 200px; // ENCLOSE .boxes
transition: left 1s; // NO JQUERY
}
#div1 {
background-color: green;
}
#div2 {
background-color: blue;
}
#div3 {
background-color: orange;
}
All of the .boxes HAVE TO be always visible, and the container HAS TO have an overflow property set to hidden, so that everything outside of its size is clipped. #slider is there to make float:left work, otherwise the .boxes the size of #container and do not behave very well.
Now it is easy to have a nice animation on the divs with a simple transition property on #slider, because we just move this element around and because #container clips everything outside of it, we get a nice effect of sliding .boxes.
Bare in mind that this approach forces you to write some additional code ( not provided by me ) to adjust the size of #slider, otherwise float:left is not going to behave correctly and the .boxes will appear on top of each other, which will ruin the effect. You could probably use display:flex to fix that, if you can use CSS3 freely.
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.