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:
#navigation{
position:absolute;
width:inherit;
top:30px;
right:60px;
margin:10px;
}
#navigation li {
width:20px;
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #99CCFF;
background-repeat: no-repeat;
background-position: center 30px;
}
#navigation li a {
color: #000000;
}
HTML i jQuery
<script>
$(function(){
//Tworzymy pusty div, którego będziemy animować
//pobieramy dane i zwiększamy je o 10
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
//Funkcja hover
$('#navigation a').hover(function() {
//Funkcja obsługi mouseOver
$('#navigation_blob').animate(
{width: $(this).width() + 10, left: $(this).position().left},
{duration: 'slow', easing: 'easeOutElastic', queue: false}
);
}, function(){
//Funkcja obsługi mouseOut
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate(
{left: $('#navigation li:first a').position().left;},
'fast'
);
}
); //Koniec funkcji hover
});//Koniec skryptu
</script>
<ul id="navigation">
<li><a href="#"> Strona główna</a></li>
<li><a href="#"> Onas </a></li>
<li><a href="#"> kup teraz</a> </li>
</ul>
P.S. Akurat ten rozdział jest udostępniony przez helion w formie pdf strona 67
http://pdf.helion.pl/jqnoni/jqnoni.pdfDoszedł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 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>dgabgsdfa</title>
<style type="text/css" media="screen">
@import"../css/szablon.css";
</style>
</head>
<p>Dzień dobry </p>
<script>
$(function(){
$('p:first')
.effect('shake', {times:3},300)
.effect('highlight', {}, 3000)
.hide('explode',{}.1000);
});
</script>
<script type="text/javascript"
src="../lib/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="../lib/jquery-ui-1.10.3.custom.min.js"></script>
</body>
</html>
P.S. Poprawiłem
.hide('explode',{}.1000); na .hide('explode',{},1000);

,
więc to nie jest ten błąd.