[JQUERY] immagine che resta attiva all'hover

sunlightbanana · 2012-08-24T16:17:09+0200

Salve,
come si può vedere dal codice:

Codice:

$('#img').hover(function() {           
 $(this).animate({left:'+=25'},500);        
    },            
        function() {                    
    $(this).animate({left:'-=25'},500)           
}

ho un'immagine che all'hover si sposta a sinistra di 25px e poi a destra sempre di 25px alla velocità di 500ms, indipendentemente da dove sia il mouse dopo aver effettuato l'hover.

Vorrei che l'immagine restasse a +25px mentre il puntatore del mouse è sopra di essa, e quando viene tolto allora torni a -25, ovvero alla posizione originale.

Chiedo cortesemete a voi e vi ringrazio per l'aiuto!!!

borgo italia · 2012-08-24T17:49:35+0200

ciao
non sono molto esperto in jq, ma googlando ho trovato questo, guarda se ti può servire adattandolo alle tue esisgenze

$("#animato").mouseenter(function(){
$(this).animate({top: '10'}, 300 );
});

$("#animato").mouseleave(function(){
$(this).animate({top: '0'}, 300 );
});

c'è l'avvertenza di dare al div nel css la posizione relative

se non va spera che ti risponda qualcuno più esperto di me

sunlightbanana · 2012-08-24T18:06:42+0200

borgo italia ha scritto:
ciao
non sono molto esperto in jq, ma googlando ho trovato questo, guarda se ti può servire adattandolo alle tue esisgenze

c'è l'avvertenza di dare al div nel css la posizione relative

se non va spera che ti risponda qualcuno più esperto di me

Ti ringrazio per il tuo aiuto, ma ho provato anchio la soluzione da te postata trovata grazie a google e... niente :crying:

Secondo te mi conviene postare in qualche altra categoria del forum?

borgo italia · 2012-08-24T18:23:37+0200

ciao
mi spiace.
comunque per jq questa è la sezione adatta.
ho letto che si può ottenere anche con i css, ma con ie non funzia

alessandro1997 · 2012-08-25T00:59:11+0200

È strano che non funzioni. Io ho provato il seguente esempio:

HTML:

<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Animazione immagine</title>
        <meta charset="utf-8">

        <style>
        #img {
            position: absolute;
        }
        </style>

        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script>
        $(function() {
            $("#img").hover(function() {
                $(this).animate({
                    left: '+=25'
                }, 500);
            }, function() {
                $(this).animate({
                    left: '-=25'
                }, 500);
            });
        });
        </script>
    </head>

    <body>
        <img id="img" src="http://images.google.it/intl/it_ALL/images/logos/images_logo_lg.gif" />
    </body>
</html>

E funziona correttamente. Prova a renderlo il più possibile simile.

Cerca

Cerca

[JQUERY] immagine che resta attiva all'hover

sunlightbanana

Utente Attivo

borgo italia

Super Moderatore

sunlightbanana

Utente Attivo

borgo italia

Super Moderatore

alessandro1997

Utente Attivo

Discussioni simili