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

**Jeyza1** · 16/05/2014, 15h47

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 :

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
 
<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>

**SylvainPV** · 16/05/2014, 16h47

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/

**Jeyza1** · 18/05/2014, 17h48

Code :

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

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

**Jeyza1** · 18/05/2014, 17h50

Merci de ta réponse !

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

Code :

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

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

**Jeyza1** · 18/05/2014, 17h54

Code :

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

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

**NoSmoking** · 21/05/2014, 11h12

Bonjour,

Code :

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

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 :

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

1
2
3
4
5
$(function(){
  $('#div1').mouseover(function () {
    $('#div2').animate({ marginLeft: '+=204'});
  });
});

**Jeyza1** · 23/05/2014, 11h16

Merci beaucoup !

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

jQuery

Discussions similaires

Partager

Partager