Animate - ScrollLeft, problème d'animation

Bonjour,

Je débute en jquery (en html et css aussi d'ailleurs ) et j'ai récupéré un script que j'utilise pour une animation avec scrollTop qui fonctionne à merveille. J'essaie donc de transposer ce code pour une utilisation horizontale dans le cadre d'une galerie.

En bref, le code simplifié donne ceci :


Partie HTML

<div id="container">
                <ul id="menu">
                    <li><a href="#i1">1</a></li>
                    <li><a href="#i2">2</a></li>
                    <li><a href="#i3">3</a></li>
                    <li><a href="#i4">4</a></li>
                    <li><a href="#i5">5</a></li>
                    <li><a href="#i6">6</a></li>
                </ul>
                
                <div id="i1"><img src="img/image1.jpg"></div>
                <div id="i2"><img src="img/image2.jpg"></div>
                <div id="i3"><img src="img/image3.jpg"></div>
                <div id="i4"><img src="img/image4.jpg"></div>
                <div id="i5"><img src="img/image5.jpg"></div>
                <div id="i6"><img src="img/image6.jpg"></div>
            
            </div>

Partie CSS

html,body{
                    margin: 0px;
                    padding: 0px;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                
                
                
                #container{
                    width: 500px;
                    height: 333px;
                    background: #cccccc;
                    position: absolute;
                    top: 75px;
                    left: 380px;
                    overflow: hidden;
                }
                
                #menu{
                    position: fixed;
                    top: 75px;
                    left: 380px;
                }
                
                #menu li{
                    display: inline;
                    padding: 0 5px 0 5px;
                    
                }
                
                #menu li a{
                    text-decoration: none;
                    color: #ffffff;
                }
                
                #container div img{
                    height: 333px;
                    width: 500px;
                }
                
                #container div{
                    float: left;
                }

Partie jquery

<script type="text/javascript">
            
            $(document).ready(function(){
                
                
                $('a[href^="#"]').click(function(){
                    
                    
                    var hrefClique = $(this).attr("href")
                    
                    
                    $("#container").animate({scrollLeft: $(hrefClique).offset().left},1000);
                    });
                });
            
            
            
        </script>

En fait les image se change bien en cliquant sur chaque lien, mais l'animation ne se fait pas. Je recherche depuis un bon moment, mais là je sèche...

Je vous remercie d'avance pour votre aide
Modifié par enoox (23 Feb 2012 - 18:41)

Je ne lâche pas l'affaire, et j'ai trouvé la solution pour que l'animation se joue. J'avais oublié d'englober les images dans une div... voici le code html modifié :

<div id="container">
                <ul id="menu">
                    <li><a href="#i1">1</a></li>
                    <li><a href="#i2">2</a></li>
                    <li><a href="#i3">3</a></li>
                    <li><a href="#i4">4</a></li>
                    <li><a href="#i5">5</a></li>
                    <li><a href="#i6">6</a></li>
                </ul>
                
            <div id="slide">
                <div id="i1"><img src="img/image1.jpg"></div>
                <div id="i2"><img src="img/image2.jpg"></div>
                <div id="i3"><img src="img/image3.jpg"></div>
                <div id="i4"><img src="img/image4.jpg"></div>
                <div id="i5"><img src="img/image5.jpg"></div>
                <div id="i6"><img src="img/image6.jpg"></div>
            </div> <!-- fermeture de slide -->
            </div>

Maintenant, le problème c'est que les images sont en décalé.. Quand je clique sur le lien qui devrait m'afficher la div avec l'id2, et bien l'animation s'arrête entre l'image 2 et 3... et là je comprends vraiment pas....

Finalement j'ai trouvé ! Le problème est que j'appliquais une logique basée sur l'élément body à des élément div. En retouchant un peu le jquery, simplifiant le css, et ajoutant une div l'animation est fonctionnelle avec le scrollLeft

Le sujet peut donc être considéré comme résolu.