Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: animowane menu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
przemysuaw
3.05.2013, 14:46:12
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

[HTML] pobierz, plaintext 
  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] pobierz, plaintext


HTML + jquery 
[HTML] pobierz, plaintext 
  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> 
[HTML] pobierz, plaintext


sunpietro
3.05.2013, 17:00:39
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
4.05.2013, 20:19:04
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: 
[PHP] pobierz, plaintext 
  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. }
[PHP] pobierz, plaintext


HTML i jQuery

[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext



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 ?

[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext


P.S. Poprawiłem

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

więc to nie jest ten błąd.
_Borys_
4.05.2013, 20:41:18
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.