jQuery: faites Glisser vers la gauche et faites glisser vers la droite

J'ai vu slideUp et slideDown en jQuery. Que sur les fonctions/les moyens pour glisser à gauche et à droite?

  • Vous pouvez simplement faire un animate({width: 0}) puis définir la position à droite ou à gauche pour qu'il ressemble à glissement à droite ou à gauche.
InformationsquelleAutor Sarfraz | 2010-03-09
  1. 68

    Vous pouvez le faire avec les autres effets de jQuery UI: Voir ici pour les détails

    Exemple rapide: 

    $(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
    • Cela semble être dépendante de Effets de Base, n'est-ce pas là la façon d'atteindre cet objectif sans aucun externes des trucs?
    • Pas que je sache, alors vous êtes en train de réinventer la roue, de toute façon...une remarque qui peut être utile, garder le sens la même chose pour cacher/montrer, c'est la direction d'où elle vient ou va...c'est un peu contre-intuitif que c'est la même chose, mais vous vous habituez à elle.
    • Vous pouvez essayer de l'extraire les pièces dont vous avez besoin si vous voulez, beaucoup de peine si, commencez ici si vous allez dans cette voie: code.google.com/p/jquery-ui/source/browse/branches/dev/effects/...
    InformationsquelleAutor Nick Craver
  2. 21

    Si vous ne voulez pas quelque chose de gonflé comme jQuery UI, essayez mes animations personnalisées: https://github.com/yckart/jquery-custom-animations

    Pour vous, blindLeftToggle et blindRightToggle est le choix approprié.

    http://jsfiddle.net/ARTsinn/65QsU/

    • Merci pour ces fabuleux fonctions.. je cherchais facile des choses comme ça pour toujours. Et il fonctionne comme un charme.
    • quand je veux faire que la console me dit Uncaught TypeError: Object [object Object] has no method 'blindLeftToggle'
    • cela ne fonctionne pas pour moi, rien ne se passe.
    • Avec ceci: jsfiddle.net/ARTsinn/65QsU/show
    InformationsquelleAutor yckart
  3. 5

    Vous pouvez toujours utiliser jQuery pour ajouter une classe, .addClass ou .toggleClass. Ensuite, vous pouvez garder tous vos styles dans votre CSS et de vos scripts.

    http://jsfiddle.net/B8L3x/1/

    InformationsquelleAutor Davidicus
  4. 0

    Ce code fonctionne bien :

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
var options = {};
$("#c").hide();
$("#d").hide();
$("#a").click(function(){
$("#c").toggle( "slide", options, 500 );
$("#d").hide();
});
$("#b").click(function(){
$("#d").toggle( "slide", options, 500 );
$("#c").hide();
});
});
</script>
<style>
nav{
float:left;
max-width:300px;
width:300px;
margin-top:100px;
}
article{
margin-top:100px; 
height:100px;
}
#c,#d{
padding:10px;
border:1px solid olive;
margin-left:100px;
margin-top:100px;
background-color:blue;
}
button{
border:2px solid blue;
background-color:white;
color:black;
padding:10px;
}
</style>
</head>
<body>
<header>
<center>hi</center>
</header>
<nav>
<button id="a">Register 1</button>
<br>
<br>
<br>
<br>
<button id="b">Register 2</button>
</nav>
<article id="c">
<form>
<label>User name:</label>
<input type="text" name="123" value="something"/>
<br>
<br>
<label>Password:</label>
<input type="text" name="456" value="something"/>
</form>
</article>
<article id="d">
<p>Hi</p>
</article>
</body>
</html>

    Reference:W3schools.com et jqueryui.com

    Note:Ceci est un exemple de code
    n'oubliez pas d'ajouter les balises de script afin d'atteindre le bon fonctionnement du code.

    InformationsquelleAutor Sivalakshmi