Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: animowane menu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
przemysuaw
Witam.
Jestem bardzo początkujący, więc proszę o wyrozumiałość smile.gif.
Oczywiście statycznie menu się tworzy za pomocą css'a, ale nie ma żadnej animacji.
W dodatku chciałbym, żeby przyciski nawigacyjne były w poziomie.
dodawałem w różnych miejscach 'display: inline', czy display="inline" , ale menu jest nadal poziome i oczywiście nie ma żadnej animacji.

Szablon css

  1. #container{
  2. position:relative;
  3. }
  4. #navigation{
  5. position:absolute;
  6. width:inherit;
  7. top:30px;
  8. right:500px;
  9. margin:60px;
  10. }
  11. #navigation li {
  12. height:20px;
  13. float:left;
  14. list-style-type: none;
  15. width:150px;
  16. padding:3px;
  17. border-right:3px solid #3687AF;
  18. border-top:3px solid #3687AF;
  19. background-color: #99CCFF;
  20. background-repeat: no-repeat;
  21. background-position: center;
  22. }
  23. #navigation li a {
  24. color: #000000;
  25. }


HTML + jquery
  1. <body id="container">
  2. <ul id="navigation">
  3. <li><a href="/" title="onas"> Onas</a></li>
  4. <li><a href="/a" title="ofert"> oferta </a></li>
  5. <li><a href="/d" title="kontk"> kontakt</a> </li>
  6. </ul>
  7. <script>
  8. $(function(){
  9. ////Tworzymy bąbel, którego będziemy animować
  10. $('<div id="navigation_blob"></div>').css({
  11. width: $('#navigation li:first a').width() + 10,
  12. height: $('#navigation li:first a').height() + 10
  13. }).appendTo('#navigation');
  14. $('#navigation a').hover(function() {
  15. //Funkcja obsługi mouseOver
  16. $('#navigation_blob').animate(
  17. {width: $(this).width() + 10, left: $(this).position().left},
  18. {duration: 'slow', easing: 'easeOutElastic', queue: false});
  19. }, function(){
  20. ////Funkcja obsługi mouseOut
  21. $('#navigation_blob')
  22. .stop(true)
  23. .animate(
  24. {width: 'hide'},
  25. {duration: 'slow', easing: 'easeOutCirc', queue: false}
  26. )
  27. .animate(
  28. {left: $('#navigation li:first a').position().left;},
  29. 'fast');
  30. }
  31. });
  32. </script>
  33. </body>


sunpietro
Dobrze by było gdybyś wykorzystał narzędzia w stylu JSFiddle.
Niekoniecznie trzeba wykorzystywać jQuery po to aby dodawać animacje. Ostatnimi czasy bardzo dużo można zrobić za pomocą CSS.
Zerknij tutaj: animacje w css

Poza tym, nie do konca rozumiem problem? Menu ma być w pionie czy w poziomie?
Cytat
W dodatku chciałbym, żeby przyciski nawigacyjne były w poziomie.
dodawałem w różnych miejscach 'display: inline', czy display="inline" , ale menu jest nadal poziome i oczywiście nie ma żadnej animacji.

Można to wyjaśnić?
przemysuaw
Cytat(sunpietro @ 3.05.2013, 18:00:39 ) *
Można to wyjaśnić?


Chodzi o to, że przyciski nawigacyjne mam w postaci wypunktowania pionowego, a chciałbym żeby były w poziomie względem siebie.
Gdzieś wyczytałem, że można to zrobic za pomocą funkcji "display" i wartości "inline", ale nie mogę sobie z tym poradzić.

Skrypt przepisywałem z książki, ale był napisany framgmentami i mogłem te fragmenty źle połączyć, bądź zapomnieć o bardzo istotnej i rzeczy.
Biblioteki są dobrze zdefiniowane, bo inne skrypty działają.

Skrypt powinien działać w następujący sposób:
Gdy najeżdżamy kursorem na menu, to ono powiększa się za pomocą funkcji easeOutElastic, jak zjeżdżam to wraca do normalnego rozmiaru.

Przepisałem go ponownie zamieniając dane na te z książki i dodałem komentarze, które mam nadzieję coś wniosą.

CSS:
  1. #navigation{
  2. position:absolute;
  3. width:inherit;
  4. top:30px;
  5. right:60px;
  6. margin:10px;
  7. }
  8. #navigation li {
  9. width:20px;
  10. height:20px;
  11. float:left;
  12. list-style-type: none;
  13. width:70px;
  14. padding:3px;
  15. border-right:1px solid #3687AF;
  16. background-color: #99CCFF;
  17. background-repeat: no-repeat;
  18. background-position: center 30px;
  19. }
  20. #navigation li a {
  21. color: #000000;
  22. }


HTML i jQuery

  1. <script>
  2. $(function(){
  3. //Tworzymy pusty div, którego będziemy animować
  4. //pobieramy dane i zwiększamy je o 10
  5. $('<div id="navigation_blob"></div>').css({
  6. width: $('#navigation li:first a').width() + 10,
  7. height: $('#navigation li:first a').height() + 10
  8. }).appendTo('#navigation');
  9. //Funkcja hover
  10. $('#navigation a').hover(function() {
  11. //Funkcja obsługi mouseOver
  12. $('#navigation_blob').animate(
  13. {width: $(this).width() + 10, left: $(this).position().left},
  14. {duration: 'slow', easing: 'easeOutElastic', queue: false}
  15. );
  16. }, function(){
  17. //Funkcja obsługi mouseOut
  18. $('#navigation_blob')
  19. .stop(true)
  20. .animate(
  21. {width: 'hide'},
  22. {duration: 'slow', easing: 'easeOutCirc', queue: false}
  23. )
  24. .animate(
  25. {left: $('#navigation li:first a').position().left;},
  26. 'fast'
  27. );
  28. }
  29. ); //Koniec funkcji hover
  30. });//Koniec skryptu
  31. </script>
  32. <ul id="navigation">
  33. <li><a href="#"> Strona główna</a></li>
  34. <li><a href="#"> Onas </a></li>
  35. <li><a href="#"> kup teraz</a> </li>
  36. </ul>



P.S. Akurat ten rozdział jest udostępniony przez helion w formie pdf strona 67 http://pdf.helion.pl/jqnoni/jqnoni.pdf



Doszedłem do tego, że brakuje mi jakiejś wtyczki, bo proste animacje działają, a poniższa już nie działa. Przesyłam nowy krótki dokumencik razem ze źródłem bibliotek.
Jakiej biblioteki albo wtyczki brakuje ?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>dgabgsdfa</title>
  6. <style type="text/css" media="screen">
  7. @import"../css/szablon.css";
  8. </style>
  9. </head>
  10. <p>Dzień dobry </p>
  11. <script>
  12. $(function(){
  13. $('p:first')
  14. .effect('shake', {times:3},300)
  15. .effect('highlight', {}, 3000)
  16. .hide('explode',{}.1000);
  17. });
  18. </script>
  19.  
  20. <script type="text/javascript"
  21. src="../lib/jquery-1.9.1.js"></script>
  22. <script type="text/javascript"
  23. src="../lib/jquery-ui-1.10.3.custom.min.js"></script>
  24. </body>
  25. </html>


P.S. Poprawiłem

.hide('explode',{}.1000); na .hide('explode',{},1000); smile.gif,

więc to nie jest ten błąd.
_Borys_
jQuery UI
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.