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);
_x000D_
.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;
}
_x000D_
<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>
_x000D_
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
or you can use
$('#myDiv').toggle("slide:right");
$("#slide").animate({width:'toggle'},350);
Reference: https://api.jquery.com/animate/
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>
An example of right to left animation without jQuery UI, just with jQuery (any version, see https://api.jquery.com/animate/).
$(document).ready(function() {_x000D_
var contentLastMarginLeft = 0;_x000D_
$(".wrap").click(function() {_x000D_
var box = $(".content");_x000D_
var newValue = contentLastMarginLeft;_x000D_
contentLastMarginLeft = box.css("margin-left");_x000D_
box.animate({_x000D_
"margin-left": newValue_x000D_
}, 500);_x000D_
});_x000D_
});
_x000D_
.wrap {_x000D_
background-color: #999;_x000D_
width: 200px;_x000D_
overflow: hidden;_x000D_
}_x000D_
.content {_x000D_
width: 100%;_x000D_
margin-left: 100%;_x000D_
background-color: #eee;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="wrap">_x000D_
click here_x000D_
<div class="content">_x000D_
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._x000D_
</div>_x000D_
</div>
_x000D_
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.
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
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);
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.
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');
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
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
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)."
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.
Source: Stackoverflow.com