Comment puis-je faire passer une div de collapsed à expand (et vice versa), mais de droite à gauche?
Presque tout ce que je vois là-bas est toujours de gauche à droite.
$("#slide").animate({width:'toggle'},350);
Référence: https://api.jquery.com/animate/
Cela peut être réalisé en mode natif à l’aide des méthodes de masquage/d’exposition de jQueryUI .
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Référence: http://docs.jquery.com/UI/Effects/Slide
Utilisez ceci:
$('#pollSlider-button').animate({"margin-right": '+=200'});
Version améliorée
Du code a été ajouté à la démo pour éviter la double marge sur un double clic: http://jsfiddle.net/XNnHC/942/
Utilisez-le avec soulagement;)
http://jsfiddle.net/XNnHC/1591/
Codes JavaScript supplémentaires supprimés.
Noms de classe et certains codes CSS modifiés
Fonctionnalité ajoutée pour rechercher si est développé ou réduit
Changement si l'utilisation atténuant l'effet ou non
Changement de la vitesse d'animation
Jetez un coup d’œil à cet exemple de travail sur Fiddle, qui utilise jQuery UI . C’est une solution que j’avais utilisée à l’origine de gauche à droite, mais que j’ai modifiée pour fonctionner de droite à gauche.
Il permet à l'utilisateur de cliquer rapidement sur les liens sans interrompre l'animation parmi les panneaux disponibles.
Le code JavaScript est 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;
});
});
Obtenez HTML et CSS sur le lien Fiddle.
Ajout d'un fond blanc et d'un remplissage à gauche pour une meilleure présentation des effets.
Utilisez ceci
<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);
});
});
Je l'ai fait de cette façon:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
Notez que ce nœud "btn" doit être masqué avant l'animation, et vous devrez peut-être également définir "position: absolute".
Vous pouvez définir d’abord la largeur de l’élément sur 0, flottant à droite, puis sur l’événement que vous êtes sur le point de l’afficher.
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
Aussi simple que cela.
Une autre bibliothèque à mentionner est animate.css . Cela fonctionne très bien avec jQuery, et vous pouvez faire beaucoup d'animations intéressantes en basculant simplement les classes CSS.
Comme..
$ ("# slide"). toggle (). toggleClass ('animated bounceInLeft');
La plate-forme d'animation GreenSock (GSAP) avec TweenLite
TweenMax
fournit des transitions beaucoup plus douces avec une personnalisation bien plus grande que les transitions jQuery ou CSS3. Pour animer des propriétés CSS avec TweenLite/TweenMax, vous aurez également besoin de leur plugin appelé "CSSPlugin". TweenMax inclut cela automatiquement.
_/Tout d'abord, chargez la bibliothèque TweenMax:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
Ou la version légère, 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>
Ensuite, appelez votre animation:
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
Vous pouvez aussi l'appeler avec un sélecteur d'identifiant:
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
Si jQuery est chargé, vous pouvez utiliser des sélecteurs larges plus avancés, comme tous les éléments contenant une classe spécifique:
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
Pour plus de détails, voir: Documentation TweenLite
Selon leur site Web: "TweenLite est un outil d’animation extrêmement rapide, léger et flexible qui sert de base à la plate-forme d’animation GreenSock (GSAP)."
Un exemple d'animation de droite à gauche sans interface utilisateur jQuery, uniquement avec jQuery (toute version, voir 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>
Un exemple réalisé par moi en utilisant le défilement (HTML, CSS et JS uniquement, avec la bibliothèque jQuery). Lorsque vous faites défiler l'écran vers le bas, un bouton glisse vers la gauche.
Aussi, je vous suggère que si le seul que vous voulez est cet effet, n'utilisez pas jQuery UI car il est trop lourd (si vous voulez simplement l'utiliser pour cela).
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
event.preventDefault();
$(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
} else {
$(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
}
});
Vérifiez cet exemple
ou vous pouvez utiliser
$('#myDiv').toggle("slide:right");
Si votre div
est absolument positionnée et que vous connaissez la largeur, vous pouvez simplement utiliser:
#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);
Ce qui le fera glisser hors de l'écran.
Sinon, vous pouvez envelopper un conteneur 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);