Deslizar da direita para a esquerda?
Como posso ter um div ir de colapso para expandido (e vice-versa), mas fazê-lo da direita para a esquerda?
A maior parte do que vejo lá fora é sempre da esquerda para a direita.16 answers
$("#slide").animate({width:'toggle'},350);
Referência: https://api.jquery.com/animate/
Isto pode ser conseguido nativamente usando os métodos jQueryUI hide/show. Exemplo.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Referência: http://docs.jquery.com/UI/Effects/Slide
Usa isto:
$('#pollSlider-button').animate({"margin-right": '+=200'});
versão Melhorada
Foi adicionado algum código à demo, para evitar margem dupla com duplo-click: http://jsfiddle.net/XNnHC/942/
Use-o com facilidade;)
Http://jsfiddle.net/XNnHC/1591/
Códigos de JavaScript extra removidos.
Nomes das classes & alguns códigos CSS alterados
Recurso adicionado para descobrir se é expandido ou colapsou
Alterado se o efeito de atenuação da utilização ou não
Velocidade de animação alterada
Dê uma olhada em este exemplo de trabalho em Fiddle, que usa jQuery UI . É uma solução que eu usei originalmente da esquerda para a direita, mas eu mudei para trabalhar da direita para a esquerda.
Permite ao utilizador clicar rapidamente nos links sem quebrar a animação entre os painéis disponíveis.
O código de JavaScript é simples:
$(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;
});
});
Obter HTML e CSS no Fiddle link.
Fundo branco adicionado e enchimento esquerdo apenas para melhor efeito apresentacao.
Utilize Este
<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>
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
Eu fiz assim:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
Note, que o nó "btn "deve ser escondido antes da animação, e você também pode precisar de definir" posição: absoluta " para ele.
$("#Slide").alternancia().toggleClass ('bounceinleft animado');
Ou pode utilizar
$('#myDiv').toggle("slide:right");
Plataforma de animação GreenSock (GSAP)) com TweenLite
/ TweenMax
fornece transições muito mais suaves com uma personalização muito maior do que as transições jQuery ou CSS3. A fim de animar as propriedades CSS com TweenLite / TweenMax, você também vai precisar de seu plugin chamado "CSSPlugin". O TweenMax inclui isto automaticamente.
Primeiro, carrega a Biblioteca TweenMax.:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
Ou a versão leve, 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>
Então, liga. a sua animação:
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
Você também pode chamá-lo com um selector de ID:
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
Se você tem jQuery carregado, você pode usar um amplo selector mais avançado, como todos os elementos que contêm uma classe específica:
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
Para mais informações, consultar:: Documentação Do TweenLite
De acordo com o seu sítio Web: O TweenLite é uma ferramenta de animação extremamente rápida, leve e flexível, que serve de base à Plataforma de animação GreenSock (GSAP)."
Você pode definir primeiro a largura do elemento como 0, flutuando à direita, e então no evento que você está prestes a mostrar.. seria como
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
Tão simples quanto isso.
Um exemplo de animação da direita para a esquerda sem jQuery UI , apenas com jQuery (qualquer versão, veja 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>
$("#slider").animate({width:'toggle'});
Um exemplo feito por mim usando o scroll (apenas HTML, CSS e JS, apenas com a biblioteca jquery). Quando descer um botão desliza para a esquerda.
{[[2]}também, eu sugiro que você se o único que você quer é este efeito, não use jQuery UI porque é muito pesado(se você só quer usá-lo para isso).$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
Verifique este exemplo
Se o seu div
está absolutamente posicionado e sabe a largura, pode usar apenas:
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
Que irá deslizar para fora do ecrã.
Em alternativa, pode embrulhá - lo num contentor 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);
Eu fiz isso usando SASS e JQuery( sem jQuery UI), mas tudo isso poderia ser alcançado em JS nativos e 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>