Posted By

maetmar on 04/05/11


Tagged

jquery


Versions (?)

Jquery how-to tutorial


 / Published in: jQuery
 

  1. Setup:
  2.  
  3. <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
  4. <script type="text/javascript">
  5. /* Inhalt hiert */
  6. </script>
  7.  
  8. Beispiel für eine Animationskette:
  9.  
  10. $(document).ready(function(){
  11.  
  12. $("#header_logo img").addClass("hide_img")
  13. .animate({opacity: "0.5", height: "+=54", width:"+=245"}, 1200)
  14. .animate({opacity: "1"},1200)
  15. return false;
  16. });
  17. Erklärung:
  18. Wenn DOM geladen ist, dann wird dem Element "header_logo img" die CSS Klasse .hide zugewiesen.
  19. Dann beginnt eine Animation. height und width werden angepasset bis 54px und bsi 245px, sowie die Transparenz. 1200 = Zeit in ms.
  20.  
  21. Fade-Effekt
  22.  
  23. Element zuerst verstecken (falls Javascript disabled ist) und dann einen fade-in Effekt
  24.  
  25. $(document).ready(function(){
  26. $("#header_logo img").addClass("hide_img")
  27. .fadeIn(3000)
  28. oder
  29. .toggle(3000)
  30. return false;
  31. })
  32. Diverses
  33.  
  34. $("a").addClass("test");
  35. $("a").removeClass("test");
  36. Schöner Effekt für Navigationen (simuliert mouseover und mouseout):
  37.  
  38. $("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
  39. Nochmals Mouseover
  40.  
  41. $("#navigation a").mouseover(function(){$(this).fadeOut(800);});
  42. $("#navigation a").mouseout(function(){$(this).fadeIn(800);});

Report this snippet  

You need to login to post a comment.