Reputation: 14860
How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left?
Most everything I see out there is always left to right.
Upvotes: 422
Views: 1022879
Reputation: 613
js:
$(document).on('click','a.slideleft', function(){
$('div.slidingdiv').addClass("ml-1000");
});
$(document).on('click','.back', function(){
$('div.slidingdiv').removeClass("ml-1000");
});
html:
<a class="open">slideleft</a>
<a class="back">back</a>
<div>Here on
<div class="slidingdiv">
Here off
</div>
</div>
style:
div.slidingdiv{
position:absolute;
transition: all 0.2s linear;
top:0;
left:0;
display:inline-block;
width:100%;
height:100%;
}
.ml-1000{
margin-left:1000px;
}
Upvotes: 0
Reputation: 87
I ran into a similar problem while trying to code a menu for small screen sizes. The solution I went with was to just shov it off the viewport.
I made this using SASS and JQuery (No JQuery UI), but this could all be achieved in native JS and CSS.
https://codepen.io/maxbethke/pen/oNzMLRa
var menuOpen = false
var init = () => {
$(".menu__toggle, .menu__blackout").on("click", menuToggle)
}
var menuToggle = () => {
console.log("Menu:Toggle");
$(".menu__blackout").fadeToggle();
if(menuOpen) { // close menu
$(".menu__collapse").css({
left: "-80vw",
right: "100vw"
});
} else { // open menu
$(".menu__collapse").css({
left: "0",
right: "20vw"
});
}
menuOpen = !menuOpen;
}
$(document).ready(init);
.menu__toggle {
position: absolute;
right: 0;
z-index: 1;
}
.menu__blackout {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.menu__collapse {
position: absolute;
top: 0;
right: 100vw;
bottom: 0;
left: -80vw;
background: white;
-webkit-transition: ease-in-out all 1s;
transition: ease-in-out all 1s;
z-index: 11;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu__toggle">Toggle menu</button>
<menu class="menu">
<div class="menu__blackout"></div>
<div class="menu__collapse">
<ul class="list">
<li class="list__item">
<a class="list__item__link" href="#section1">Menu Item 1</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section2">Menu Item 2</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section3">Menu Item 3</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section4">Menu Item 4</a>
</li>
<li class="list__item">
<a class="list__item__link" href="#section5">Menu Item 5</a>
</li>
</ul>
</div>
</menu>
Upvotes: 0
Reputation: 1868
Use This
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>
Upvotes: 21
Reputation: 1415
If your div
is absolutely positioned and you know the width, you can just use:
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
Which will slide it off screen.
Alternatively, you could wrap it a container div
#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}
#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}
<div id="myContainer">
<div id="myDiv">Wheee!</div>
</div>
$('#myDiv').animate({left:'-200'},1000);
Upvotes: 1
Reputation: 772
An example done by me using the scroll (just HTML, CSS and JS, just with the jquery library). When scrolls down a button will slide left.
Also, I suggest you if the only one that you want is this effect, don't use jQuery UI because it's too heavy(if you just want to use it for that).
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
Check this example
Upvotes: 2
Reputation: 429
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
Upvotes: 11
Reputation: 539
Take a look at this working example on Fiddle, which uses jQuery UI. It is a solution I've used originally from left to right, but I've changed it to work from right to left.
It allows user to click on links quickly without breaking the animation among the available panels.
The JavaScript code is simple:
$(document).ready(function(){
// Mostra e nascondi view-news
var active = "europa-view";
$('a.view-list-item').click(function () {
var divname= this.name;
$("#"+active ).hide("slide", { direction: "right" }, 1200);
$("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
active = divname;
});
});
Get HTML and CSS at the Fiddle link.
Added white background and left-padding just for better effect presentation.
Upvotes: 23
Reputation: 3621
Use this:
$('#pollSlider-button').animate({"margin-right": '+=200'});
Improved version
Some code has been added to the demo, to prevent double margin on double click: http://jsfiddle.net/XNnHC/942/
Use it with easing ;)
http://jsfiddle.net/XNnHC/1591/
Extra JavaScript codes removed.
Class names & some CSS codes changed
Added feature to find if is expanded or collapsed
Changed whether use easing effect or not
Changed animation speed
http://jsfiddle.net/XNnHC/1808/
Upvotes: 78
Reputation: 3584
Another worth mentioning library is animate.css. It works great with jQuery, and you can do a lot of interesting animations simply by toggling CSS classs.
Like..
$("#slide").toggle().toggleClass('animated bounceInLeft');
Upvotes: 7
Reputation: 69
Check the example here.
$("#slider").animate({width:'toggle'});
https://jsfiddle.net/q1pdgn96/2/
Upvotes: 4
Reputation: 330
An example of right to left animation without jQuery UI, just with jQuery (any version, see https://api.jquery.com/animate/).
$(document).ready(function() {
var contentLastMarginLeft = 0;
$(".wrap").click(function() {
var box = $(".content");
var newValue = contentLastMarginLeft;
contentLastMarginLeft = box.css("margin-left");
box.animate({
"margin-left": newValue
}, 500);
});
});
.wrap {
background-color: #999;
width: 200px;
overflow: hidden;
}
.content {
width: 100%;
margin-left: 100%;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
click here
<div class="content">
I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
</div>
</div>
Upvotes: 5
Reputation: 17124
GreenSock Animation Platform (GSAP) with TweenLite
/ TweenMax
provides much smoother transitions with far greater customization than jQuery or CSS3 transitions. In order to animate CSS properties with TweenLite / TweenMax, you'll also need their plugin called "CSSPlugin". TweenMax includes this automatically.
First, load the TweenMax library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
Or the lightweight version, TweenLite:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
Then, call your animation:
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
You can also call it with an ID selector:
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
If you have jQuery loaded, you can use more advanced broad selectors, like all elements containing a specific class:
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
For full details, see: TweenLite Documentation
According to their website: "TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP)."
Upvotes: 5
Reputation: 4085
$("#slide").animate({width:'toggle'},350);
Reference: https://api.jquery.com/animate/
Upvotes: 402
Reputation: 238
You can define first the width of the element as 0, floating right, and then on the event that you are about to show it.. it would be like
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
Simple as that.
Upvotes: 4
Reputation: 4020
I've done it this way:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
Note, that node "btn" should be hidden before animation, and you might also need to set "position: absolute" to it.
Upvotes: 7
Reputation: 2937
This can be achieved natively using the jQueryUI hide/show methods. Eg.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Reference: http://docs.jquery.com/UI/Effects/Slide
Upvotes: 255