11498 sujets

JavaScript, DOM et API Web HTML5

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
        });
    }
);