Effetto bounce con jQuery applicato a un menu orizzontale

**bibbul_dex** · 02-08-2014, 22:46

Salve! Volevo aggiungere al mio menu l'effetto bounce al passaggio del mouse, solo che l'effetto funziona ma non bene..

le caselle si spostano leggermente verso sinistra e poi se passo con il mouse su più caselle fa un casino... e non come risolverlo

chiedo aiuto ai professionisti

ecco la pagina con il menu e l'effetto:http://destinationluccaceg.altervista.org/#section3

ed ecco il codice:

codice HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Senza nome 1</title>
    <style>
      .menu{
        position:fixed;
        top:0; 
       left:0;
        list-style:none; 
       margin:0;
        padding:0;
        display:table;
        z-index:350;
        width:100%;
      }
      .menu li{
        display:table-cell;
       width:16.66666666666666%;
        border-bottom:4px solid #000000;
      }
      .menu li a{
        display:block;
        color: #fff;
        font:bold small-caps 18px Arial,Helvetica,sans-serif;
        padding:10px 0px 10px 0px;
        text-align:center;
        text-decoration:none;
        text-shadow:1px 1px 2px #666;
        filter:shadow(color=#666666,direction=135,strength=2);
       }
     .menu .c1 { background:#404040 }
      .menu .c2 { background:#ffc900 }
      .menu .c3 { background:#ff8957 }
      .menu .c4 { background:#ff2525 }
      .menu .c5 { background:#bad700 }
      .menu .c6 { background:#49b6e8 }
    
     .active a { color:#e5e4e2 }
    </style> 
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  </head>
  <body>
    <ul class="menu">
      <li class="c1 active"><a href="#section1">Section1</a></li>
      <li class="c2"><a href="#section2">Home</a></li>
      <li class="c3"><a href="#section3">Section3</a></li>
      <li class="c4"><a href="#section4">Section4</a></li>
      <li class="c5"><a href="#sectopm5">Section5</a></li>
      <li class="c6"><a href="#section6">Section6</a></li>
    </ul>
    <script>
      $( "li" ).hover(function() {
        $( this ).effect( "bounce", "slow" );
      });
    </script>
  </body>
</html>

**cavicchiandrea** · 02-08-2014, 23:55

Ho fatto qualche prova veloce http://webandylab.altervista.org/boncemenu.html ma dire che non è possibile visto che l'effetto aggiunge un div con posizione relativa http://webandylab.altervista.org/Schermataboncemenu.png se è risolvibile l'unica e provare con i css

**bibbul_dex** · 03-08-2014, 00:25

Peccato.. :/ per ora credo che ne farò a meno visto che devo fare una marea di altre cose.. Grazie Andrea sempre gentile e disponibile!

**KillerWorm** · 03-08-2014, 00:49

Ciao, prova così ... chiaramente ho dovuto modificare alcune cose che non sto a spiegare (ad ogni modo, se non ti è chiaro qualcosa chiedi pure:

codice:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Senza nome 1</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script>
      $(function(){
        $( "li a" ).hover(
            function(){$(this).stop().animate({"padding-top":"20"},200,"easeOutCubic")}
          , function(){$(this).stop().animate({"padding-top":"10"},600,"easeOutBounce")}
        )
      });
    </script>
    <style>
      .menu{
        position:fixed;
        top:0;
        left:0;
        list-style:none;
        margin:0;
        padding:0;
        display:table;
        z-index:350;
        width:100%;
        
      }
      .menu li{
        display:table-cell;
        width:16%;
        vertical-align: top;        
      }
      .menu li a{
        display:block;
        border-bottom:4px solid #000;
        color: #fff;
        font:bold small-caps 18px Arial,Helvetica,sans-serif;
        padding:10px 0px;
        text-align:center;
        text-decoration:none;
        text-shadow:1px 1px 2px #666;
        filter:shadow(color=#666666,direction=135,strength=2); 
      }
      
      .menu .c1 a { background:#404040 }
      .menu .c2 a { background:#ffc900 }
      .menu .c3 a { background:#ff8957 }
      .menu .c4 a { background:#ff2525 }
      .menu .c5 a { background:#bad700 }
      .menu .c6 a { background:#49b6e8 }
      
      .menu .active a { color:#e5e4e2 }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li class="c1 active"><a href="#section1">Section1</a></li>
      <li class="c2"><a href="#section2">Home</a></li>
      <li class="c3"><a href="#section3">Section3</a></li>
      <li class="c4"><a href="#section4">Section4</a></li>
      <li class="c5"><a href="#sectopm5">Section5</a></li>
      <li class="c6"><a href="#section6">Section6</a></li>
    </ul>

  </body>
</html>

EDIT: ho notato ora un piccolo problema. Dal momento che ho dovuto mettere, per necessità di funzionamento del bounce, il background sugli elementi <a> (e non su <li>) l'effetto ombra per IE8/9 va a farsi friggere... a questo punto ti propongo di eliminarlo.

**cavicchiandrea** · 03-08-2014, 00:55

Non è proprio la stessa cosa del buonce ma meglio che niente, e come si dice chi si accontenta gode

**KillerWorm** · 03-08-2014, 01:03

Originariamente inviata da cavicchiandrea

Non è proprio la stessa cosa del buonce ma meglio che niente, e come si dice chi si accontenta gode

Chiaro... io l'ho immaginato così

questione di gusti. Ad ogni modo l'effetto si può cambiare facilmente ma credo che il problema più grosso stava nell'evitare di far sfasciare il layout.

**bibbul_dex** · 03-08-2014, 02:26

Grande complimenti sei un genio!

Sinceramente è anche meglio!

Se hai tempo mi potresti spiegare questa parte:

codice HTML:

   function(){$(this).stop().animate({"padding-top":"20"},200,"easeOutCubic")}
, function(){$(this).stop().animate({"padding-top":"10"},600,"easeOutBounce")}

Di javascript capisco poco anzi nulla, lo sto studiando adesso da per me, quasi la stessa cosa con css e html solo che quest'altri due linguaggi li conosco un po' meglio, io sono più orientato verso C# e arduino, ora sto studiando attraverso la pratica e i vostri aiuti, html, css e javascript, ho quasi finito un mio sito personale sono rimaste un paio di cose da perfezionare, ora sto realizzando un sito per un mio amico che organizza un pullman per lucca comics and games, ho pensato di esercitarmi con un'interfaccia più innovativa rispetto a quelle classiche e ho già riscontrato un problema che credo mi darà del filo da torcere.. il problema è che quando la finestra viene ridimensionata quindi quando varia la risoluzione, sul sito sembra che sia esplosa un bomba..

dovrò realizzare un layout fluid e ho già un po' di idee e spero siano giuste, in ogni modo farò delle ricerche dopo che finirò completamente il sito, prima voglio terminarlo e disporre tutte le "componenti" poi fisserò questo problema...

Comunque tornando a noi dopo avervi annoiati con la mia storiella, ho letto in rete che .stop() serve per fermare tutte le animazioni in corso, mi potete confermare se è così? Vi ringrazio molto per il vostro aiuto e la vostra disponibilità!

**KillerWorm** · 04-08-2014, 00:05

Se hai tempo mi potresti spiegare questa parte:
...
Di javascript capisco poco anzi nulla

Più precisamente si tratta di jQuery che è un framework JavaScript, per cui sarebbe più opportuno (te lo consiglio) apprendere bene, come prima cosa, le basi di JavaScript prima di cimentarsi anche con jQuery.

Ad ogni modo, molto sinteticamente, stop() serve ad interrompere eventuali animazioni in corso sull'elemento a cui è applicato, mentre animate() (lo dice la parola) crea un'animazione eseguendo, sostanzialmente, delle transizioni di valori per le proprietà specificate.
Il tutto applicato al metodo hover() per cui è possibile specificare una funzione che sarà eseguita quando il puntatore si porta sull'elemento e una eseguita quando il puntatore esce fuori dall'elemento.

**bibbul_dex** · 04-08-2014, 20:21

Ok! Perfetto, ti ringrazio molto per la spiegazione

Discussione: Effetto bounce con jQuery applicato a un menu orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Effetto bounce con jQuery applicato a un menu orizzontale

Permessi di invio