Recherche effet Jquery !

passealasuite
Javascript

Bonjour,

Avant tout merci de prendre le temps de me lire.

Je vous explique mon petit problème, je suis à la recherche d'un script qui réalise un effet en jquery (me semble t-il).

L'effet en question permet de faire apparaitre une image à travers une autre déjà en place. Pour illustrer mes explications qui reste flou, je recherche l'effet présent sur ce site web, sur les carrés Twitter & Facebook : www.mediasoul.it.
En haut du site web.

Par avance merci.

Cordialement

5 réponses

Maleas
Réponse acceptée

Bien le bonjour,
Voici une modification du code de jbou qui permet d'ajouter un petit délai sur le changement des positions lorsque le curseur sort des div :

<!DOCTYPE html>
<html>
    <head>
        <title>Mon test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">

        jQuery(document).ready(function($){

            $('.movebox').mouseover(function(){
                $(this).find('div:first').stop().animate({
                    marginTop : -20
                },300);
            }).mouseleave(function(){
                var th = this;
                setTimeout(function (){
                $(th).find('div:first').stop().animate({
                    marginTop : 0
                },300);
                },1000);
            });
        });

        </script>
        </head>
    <body>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: red;"></div>
            <div style="width: 20px;height: 20px; background-color: green;"></div>
        </div>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: yellow;"></div>
            <div style="width: 20px;height: 20px; background-color: blue;"></div>
        </div>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: blueviolet;"></div>
            <div style="width: 20px;height: 20px; background-color: burlywood;"></div>
        </div>
    </body>
</html>
MrGuillou

Bonsoir,

JavaScript

jQuery(document).ready(function($){

            $('.movebox').mouseover(function(){
                $(this).find('div:first').stop().animate({
                    marginTop : -20
                },300);
            }).mouseout(function(){
                $(this).find('div:first').stop().animate({
                    marginTop : 0
                },300);
            });
});

Html 

<div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: red;"></div>
            <div style="width: 20px;height: 20px; background-color: green;"></div>
        </div>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: yellow;"></div>
            <div style="width: 20px;height: 20px; background-color: blue;"></div>
        </div>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: blueviolet;"></div>
            <div style="width: 20px;height: 20px; background-color: burlywood;"></div>
        </div>
passealasuite
Auteur

Bonsoir,

Merci pour votre réponse mais ça ne fonctionne pas.

Je ne comprend pas pourquoi.

Merci quand même.

Bonne soirée

MrGuillou

Normalement ça marche, n'oubliez pas d'appeler jquery

<!DOCTYPE html>
<html>
    <head>
        <title>Mon test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function($){

            $('.movebox').mouseover(function(){
                $(this).find('div:first').stop().animate({
                    marginTop : -20
                },300);
            }).mouseleave(function(){
                $(this).find('div:first').stop().animate({
                    marginTop : 0
                },300);
            });
        });
        </script>
        </head>
    <body>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: red;"></div>
            <div style="width: 20px;height: 20px; background-color: green;"></div>
        </div>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: yellow;"></div>
            <div style="width: 20px;height: 20px; background-color: blue;"></div>
        </div>
        <div class="movebox" style="width: 20px;height: 20px; overflow: hidden;">
            <div style="width: 20px;height: 20px; background-color: blueviolet;"></div>
            <div style="width: 20px;height: 20px; background-color: burlywood;"></div>
        </div>
    </body>
</html>
passealasuite
Auteur

Bonjour,

Merci à vous deux, les deux codes fonctionnent.

Encore merci

Bonne journée

Cordialement