Új hozzászólás Aktív témák

• Sk8erPeter nagyúr

  #4927

  #4920 adam_

  2015-02-23 11:28:03

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Sk8erPeter

  nagyúr

  #4920 adam_

  #4920 adam_

  https://jsfiddle.net/8ndwnb2b/
  A linkelt Fiddle példámban szeretném elérni, hogy amikor látogató megnyitja a honlapot, akkor a css: hover effekt automatikusan végigmenjen az összes csíkon, mintha odaérintette volna a kurzort. Szóval nem csak úgy szeretném a csíkok transzformációját, amikor a látogató manuálisan odaviszi a kurzort felé, hanem már akkor is amikor betöltődik az oldal, és a látogató még nem csinált semmit sem. Akkor menjen végbe a transzformáció az összes csíkon egyszer.. majd álljon vissza eredeti poziciójába.

  Írtam Fiddleben egy próbálkozást JQueryben, nem is fut , viszont úgy tudom lehetőség van rá, hogy JS segítségével megoldható, hogy "szimulálja" a hover effektet, mintha felettük lenne az egérkurzor, holott a valóságban nincs. Úgy tudom, ez click eventtel simán megy, hoverrel is lehetséges? Vagy teljesen másképp kellene megoldani?

  Előre is köszönöm a válaszokat,

  Ádám

  Ez nagyon egyszerű, a :hover részhez még hozzáadsz egy osztályt is, amire ugyanezek a tulajdonságok érvényesek (vesszővel elválasztva, pl. .skill_line:hover, .skill_line_hovered { /*...*/ }, itt a skill_line_hovered osztály az új), majd ezt az osztályt hozzáadod JavaScripttel, ettől elindul az animáció, majd leveszed az osztályt, amikor azt szeretnéd, hogy visszacsússzon eredeti állapotába.
  Tessék:
  https://jsfiddle.net/8ndwnb2b/1/

  Amúgy volt egy csöpp hiba a CSS-kódodban:
  -webkit-transition: width 2s;
  For Safari 3.1 to 6.0 -ms-transition: width 2s;
  Ez a For Safari 3.1 to 6.0 nyilván komment akart lenni, de nem működő kód lett belőle.

  Az eredeti JS-kódban a scrollozással kapcsolatos résznek meg nem sok értelme volt.

  (#4924) D4nY:
  Itt van egy nagyon egyszerű dialógusablakot felpattintó kód a jQuery UI felhasználásával:
  http://jqueryui.com/dialog/#modal-confirmation
  Ha elakadsz, segítünk.

Új hozzászólás Aktív témák