Recherche effet Jquery !

Par passealasuite, il y a 14 ans

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

MrGuillou, il y a 14 ans

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, il y a 14 ans

Bonsoir,

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

Je ne comprend pas pourquoi.

Merci quand même.

Bonne soirée

MrGuillou, il y a 14 ans

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>
Maleas, il y a 14 ans

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>
passealasuite, il y a 14 ans

Bonjour,

Merci à vous deux, les deux codes fonctionnent.

Encore merci

Bonne journée

Cordialement