Déplacement d'une div au survol d'une autre avec effet de transition

Version imprimable

Bonjour !

Petit problème de débutant...

J'aimerais déplacer la div "div2" 204px à droite lorsque l'on survole la div "div1". J'aimerais aussi que ce déplacement soit fluide (avec transition).

J'ai essayer un script, mais il ne fonctionne pas du tout...

Voila j’espère qu'un génie du code saura m'éclairer.

Code:

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
 
<html>
 
    <head>
 
        <script type="text/javascript" src="js/jquery.js"></script>
        <style>
 
            #menu1 {
                width: 204px;
                height: 102px;
                background-color: #243470;
            }
 
            #menu2 {
                width: 204px;
                height: 102px;
                background-color: #017761;
            }
 
        </style>
 
    </head>
 
    <body>
 
        <div id="div1"></div>
        <div id="div2"></div>
 
        <script>
 
            $(function(){
                $('#div1').mouseover(function(){
                    $('#div2').transition({ x: '204px' });
                )};
            )};
 
        </script>
 
    </body>
 
</html>

16/05/2014, 16h47
SylvainPV

Où est-ce que tu as vu qu'une fonction transition existait dans jQuery ? Mets la div à déplacer en position relative puis change l'attribut left avec animate : http://api.jquery.com/animate/

Code:

1
2
3
4
5
6
7
8
9
<script>
 
            $(function(){
                $('#div1').mouseover(function(){
                    $('#div2').transition({ x: '204px' });
                )};
            )};
 
        </script>

Merci de ta réponse !

J'ai essayer ça .. Mais ça ne fonctionne pas ... Une idée ?

Code:

1
2
3
4
5
6
7
8
9
10
<script>
 
            $(function(){
                $('#menu1').mouseover(function(){
                    $('#menu2').animate({ margin-left: +=204 });
                    )};
                )};
            )};
 
        </script>

Désolé , problèmes d'id

Code:

1
2
3
4
5
6
7
8
9
<script>
 
            $(function(){
                $('#div').mouseover(function(){
                    $('#div2').animate({ margin-left: +=204 });
                )};
            )};
 
        </script>

21/05/2014, 11h12
NoSmoking
Bonjour,
Citation:
Code:

1 2 3 4 5 6 $(function(){ $('#menu1').mouseover(function(){ $('#menu2').animate({ margin-left: +=204 }); )}; )}; )};
pour commencer il y a mauvaise ordonnancement des )}, tu devrais avoir }).

- Si tu écris margin-left javascript prend cela pour une soustraction il te faut donc mettre des quotes ou écrire marginLeft la version javascript de margin-left.

- Si tu écris +=204 javascript prend cela pour une incrémentation, même punition, il te faut donc mettre des quotes.

Au final tu auras
Code:

1 2 3 4 5 $(function(){ $('#div1').mouseover(function () { $('#div2').animate({ marginLeft: '+=204'}); }); });
23/05/2014, 11h16
Jeyza1

Merci beaucoup !