11499 sujets

JavaScript, DOM et API Web HTML5

Petite animation jquery

Bonjour

j'ai une petite demande, je débute en javascript et jquery et je veux réaliser une animation au survole comme cela http://www.valentinaghanem.com/

j'arrive mm pas a commencer au niveau de script Smiley ohwell est ce qu'il y a des suggestions ou solutions

voila a peu prés mon code html 


<div id="container2"  >
    <div class="grille">
         
        <img class="boite" src="logo/1.png" style="margin-right:5px;margin-bottom:5px;">
            <img class="boite" src="logo/3.png" style="margin-right:5px;margin-bottom:5px;">
            <img class="boite" src="logo/5.png" style="margin-bottom:5px;">
         
            <img class="boite" src="logo/7.png"  style="margin-right:5px;margin-bottom:5px;">
            <img class="boite" src="logo/9.png"  style="margin-right:5px;margin-bottom:5px;">
            <img class="boite" src="logo/11.png" style="margin-bottom:5px;">
         
            <img class="boite" src="logo/13.png" style="margin-right:5px;margin-bottom:5px;">
            <img class="boite" src="logo/15.png" style="margin-right:5px;margin-bottom:5px;">
            <img class="boite" src="logo/17.png" style="margin-bottom:5px;">
 
        </div>
    </div>
Coucou,

Je sais pas si tu as déjà trouvé la réponse à ta question mais je crois que tu devrais utiliser la fonction animate() de jquery.
Tu peux essayer ça, (c pas vraiment pareil mais le principe est le même) :


<title>Animation image</title>
<style>

section {
text-align:center; padding:10em 5em;
}
div {
width:228px;
height:117px;
background:black;
position:relative;
overflow:hidden;
display:inline-block;
margin:0 20px 20px 0;
}
div a {
text-decoration:none;
font-family:"Helvetica Neue";
color:white;
}
div a h2 {
text-transform:uppercase;
margin-top:1em;
}
div img {
position:absolute;
top:0;
left:0;
width:228px;
height:117px;
}
</style>
</head>
<body>

<section>
<div>
<a href="#">
<h2>titre</h2>
<p>texte</p>
</a>
<img src="http://webcreme.com/wp-content/images/qcmerge.jpg" />
</div>
<div>
<a href="#">
<h2>titre</h2>
<p>texte</p>
</a>
<img src="http://webcreme.com/wp-content/images/festivalmundo.jpg" />
</div>
<div>
<a href="#">
<h2>titre</h2>
<p>texte</p>
</a>
<img src="http://webcreme.com/wp-content/images/pilot.jpg" />
</div><div>
<a href="#">
<h2>titre</h2>
<p>texte</p>
</a>
<img src="http://webcreme.com/wp-content/images/blogfreepeople.jpg" />
</div>
</section>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div').hover(function(){
// l'image se décale
$(this).find('img').animate({
left: '228px'
},
{
queue:false,
duration:100
});
});

$('div').mouseleave(function(){
// l'image se décale
$(this).find('img').animate({
left: '0'
},
{
queue:false,
duration:100
});
});
});
</script>

</body>
</html>


Voilà!!Je sais pas trop si ça réponds à peu près à la question.
Bonne chance!! Smiley ravi
Pour info la fonction hover de jquery gere le mouseenter et le mouseleave directement, tu n'a donc pas besoin de faire appel à un mouseleave pour l'animation de sortie ... il te suffit juste d'écrire le hover de cette facon :


$('div').hover(function () {
        $(this).find('img').animate({
            left: '228px'
        }, {
            queue: false,
            duration: 100
        });
    },
    function () {
        $(this).find('img').animate({
            left: '0'
        }, {
            queue: false,
            duration: 100
        });
    }
);
Sujet clos
Aller à