jquery (ui ?) slide right

**artenis** · 14/12/2012, 00h05

Bonjour, ( !! ma question concerne à la fois le css et le jquery !!)

J'ai 3 div principales dans un conteneur :
la première 1 div à gauche (float:left), contient un formulaire et placée en z-index:30
la deuxième 2 à gauche (float:left), située en-dessous de la première z-index:20
la troisième 3 à droite (float:right), placée en z-index:10

je souhaite appliquer un slide (direction droite) à la deuxième div , sans que la div de gauche soit décallée.
(je n'arrive pas à me décider entre animate et jquery ui "show")

Après plusieurs test je n'arrive toujours pas à savoir quel attribut css utiliser pour empecher la div ( de droite de se décaler vers le bas pendant que le slide (animate) s'effectue sur la div 2 à gauche.

le but est de faire passer la div 2 par dessus la div 3.

un très grand merci à la personne qui pourra me donner l'explication à mon problème

**artenis** · 14/12/2012, 23h47

J'ai essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 
	$('#r-a_click').click(function(){
 
		$('#rechercher-ava').toggle(
		function() {
			$(this).stop().animate({marginLeft:'290px'},1000);
		},
 		function() {
    		$(this).stop().animate({marginLeft:0},1000);
  		});
	});

legende : r-a-click et r-a-cache sont dans le même conteneur "rechercher-ava"
mais il y a un bug : pour la deuxième partie du toggle le click sur "r-a-click" ne fonctionne pas, mais marche sur la div situé à sa gauche "r-a-cache".

Auriez-vous une solution ?

**danielhagnoul** · 15/12/2012, 00h51

Bonsoir

Un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			footer { margin-top: 30rem; }
 
			div { position: relative; border:0.1rem dotted grey;  width: 20rem; height: 20rem; margin: 2rem; padding: 0.6rem; }
 
			div:nth-of-type(1) { float: left; z-index: 30; background-color: yellow; }
			div:nth-of-type(2) { float: left; z-index: 20; background-color: red; }
			div:nth-of-type(3) { float: left; z-index: 10; background-color: blue; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
 
		<div><button id="btn1">Slide</button></div>
		<div><button id="btn2">Slide</button></div>
		<div><button id="btn3">Slide</button></div>
 
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-15T00:46:47.126+01:00" pubdate>2012-12-15T00:46:47.126+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
				var sens1 = "+",
					sens2 = "+",
					sens3 = "-";
 
				$( "#btn1" ).on( "click", function(){
					$( this ).parent().animate({ "left" : sens1 + "=80rem" }, 3000, function(){
						if ( sens1 == "+" ){
							sens1 = "-";
						} else {
							sens1 = "+";
						}
					});
				});
 
				$( "#btn2" ).on( "click", function(){
					$( this ).parent().animate({ "left" : sens2 + "=50rem" }, 3000, function(){
						if ( sens2 == "+" ){
							sens2 = "-";
						} else {
							sens2 = "+";
						}
					});
				});
 
				$( "#btn3" ).on( "click", function(){
					$( this ).parent().animate({ "left" : sens3 + "=55rem" }, 3000, function(){
						if ( sens3 == "+" ){
							sens3 = "-";
						} else {
							sens3 = "+";
						}
					});
				});
 
			});
		</script>
	</body>
</html>

**artenis** · 15/12/2012, 11h08

Merci Danielhagnoul,

mais je ne comprends pas cette partie là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if ( sens1 == "+" ){
							sens1 = "-";
						} else {
							sens1 = "+";
						}

et je ne comprends pas l'utilisation de sens1 comme variable associé à "left".

j'ai un conteneur qui contient deux div, une a gauche et une à droite. Quand je clique sur celle de droite le conteneur s'anime et slide vers la droite, mais lorsque je veux le refermer (slide gauche) le script ne s'execute plus sur la div droite mais sur la div gauche. Or je n'ai rien spécifier de tout cela dans mon script.

**danielhagnoul** · 15/12/2012, 22h43

Bonsoir

C'est une page de démonstration qui montre ce qu'il est possible de faire avec la méthode animate() de jQuery.

Il suffit de copier-coller le code de ma page de test pour voir la démonstration.

Le bouton "Slide" permet de déplacer la division parent au premier clic et de la ramener à son emplacement d'origine au second clic.

La valeur de sens est "+" ou "-" selon le sens du déplacement et la division concernée.

Il faut reprendre la partie du code qui vous intéresse et l'adapter à vos besoins spécifiques.

**artenis** · 16/12/2012, 11h36

j'ai bien fait un copier/coller de votre script, cependant, même après l'avoir adapté à mon code, il ne fonctionne pas .

si cela vous est possible pourriez vous me décrire en détail sa signification.

jquery (ui ?) slide right

jQuery

Vue hybride

Discussions similaires

Partager

Partager