• Címkék:
  • hover
  • out
  • egér
  • mouse
  • link
  • mutató

hoverIntent

A kezdet

Kiindulásként van két függvényünk, egyik az onMouseOver, másik a onMouseOut esemény megfelelője:
over esetén az aktuális blokk "lenyílik", míg out-nál visszatér eredeti állapotába. Ezen függvények forráskódja a következőképp néz ki:

        function functionOver () { 
          $(this).animate({ height: 60, opacity: .6 }, 200);
        }

        function functionOut () {
          $(this).animate({ height: 35, opacity: 1 }, 200);
        }
      

Példa: hagyományos .hover() megoldás

Ha az egeret (bármilyen gyorsan is) áthúzzuk a blokkok felett, mindegyik érintett blokk lenyílik, majd visszazáródik, azaz minden egyes blokknál meghívásra kerül a functionOver és functionOut függvény egyaránt:

Példa: .hoverIntent() megoldás

Ha alábbi példa fölött húzzuk el az egeret, akkor itt már nem tapasztaljuk a felesleges függvény meghívásokat:
mielőtt egy-egy blokk lenyílna, a plugin úgymond megbizonyosodik arról, hogy a felhasználó nem csak "eltévedt":

Az egész kód egyben

Deklaráció

        $(document).ready(function(){
          function functionOver () { 
            $(this).animate({ height: 60, opacity: .6 }, 200);
          }

          function functionOut () {
            $(this).animate({ height: 35, opacity: 1 }, 200);
          }

          $('#pelda-1 li').hover(functionOver, functionOut);

          var config = {
            over: functionOver,
            timeout: 300,
            out: functionOut
          }

          $('#pelda-2 li').hoverIntent(config);
        });
      

« bezár