Płynne przechodzenie podkreślenia w menu Opcje

[Kleryk]

Witam,

Chciałem zrobić płynnego hover na moje menu, ale za chiny nie wiem jak to w Googlu nazwać wpisywałem już kilkanaście fraz ale nie znalazłem nic co by było związane z tym co chce zrobić.

O co chodzi; active i hover to są zwykłe podkreślenia tekstu; np: zakładka start jest active i pod jej nazwą jest podkreślenie, a gdy zacznę jeździć po menu to ta linia albo jakaś nowa linia będzie płynne przechodzić pod nazwami menu, nie tak jak normalnie jest, że znika z pod tego tekstu i się pojawia obok, tylko płynnie przesuwa się z jednej zakładki do tej, na której mam aktualnie myszkę.

Chociaż link bym poprosił jak ktoś się już spotkał z takim rozwiązaniem.

Pozdrawiam

[tolomei]

Witaj.

3 minuty rozmowy z wujkiem.
http://www.gmarwaha.com/blog/2007/08/23/la...-jquery-lovers/

[Kleryk]

Dzięki, bardzo mi pomogłeś (IMG:style_emoticons/default/smile.gif)
Właśnie przerobiłem to menu i mam tylko mały problem z kolorem tej linii, która się przesuwa. W css nie ma koloru tej linii więc musi być tylko w bibliotece js, ja się zabardzo na tym nie znam po za tym skołowało mnie, że jak szukałem koloru #0000FF albo blue nic mi nie znalazło, kod bibliotek, które są używane:


jquery.lavalamp.min.js

Kod

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

jquery.easing.min.js

Kod

jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};

Do tego dochodzi standardowa biblioteka jquery-1.1.3.1.min.js
Stawiam że ten kolor jest jakiś domyślny ale nie wiem ja go zmienić

Pozdrawiam

[Szymciosek]

Przypadkiem to nie jest jakiś obrazek ?

[Kleryk]

Zapomniałem dopisać, obrazek też nie, na stronę przeniosłem tylko kod z css i zaincludowałem biblioteki js head oraz dodałem menu jako ul li itp

P.S
CSS

Kod

     .lavaLampBottomStyle {
            position: relative;
            height: 29px;
            width: 421px;
            background-color: white;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
            border: 1px solid gray;
        }
                .lavaLampBottomStyle li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampBottomStyle li.back {
                        border-bottom: 5px solid blue;
                        width: 9px;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampBottomStyle li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #000;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }  
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
                            border: none;
                        }

Znalazłem (IMG:style_emoticons/default/smile.gif) W css był a cssa badałem firebugimem i nic mi nie pokazywał, dzięki za pomoc :*

BTW to to menu nie działa (IMG:style_emoticons/default/snitch.gif) nie przechodzi do linków które się poda, nic się nie dzieje jak klikam, pokazduje mi adres, a jak kliknę otwórz w nowej karcie to mi otworzy.

Ten post edytował Kleryk 10.04.2012, 13:19:09

[tolomei]

Witaj ponownie Kleryk.

Skrypt działa tylko że jest przystosowany raczej do kotwic na stronie niż do zwykłych linków.
Tu masz rozwiązanie:

1. W pliku html, gdzie załączasz skrypty .js, zamiast załączyć

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
[HTML] pobierz, plaintext 

to załącz

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery.lavalamp.js"></script>
[HTML] pobierz, plaintext 

2.Otwórz skrypt jquery.lavalamp.js i usuń z niego linie od 73 do 76.
Można usunąć więcej niepotrzebnych rzeczy, ale to wystarczy, aby linki zaczęły działać.

Pamiętaj, że stałe podświetlenie będzie aktywne dla elemenu <li class="current">.

Pozdrawiam.

[Kleryk]

Dziki wielkie :* Działa

[mefju koder]

Witaj ponownie Kleryk.

Skrypt działa tylko że jest przystosowany raczej do kotwic na stronie niż do zwykłych linków.
Tu masz rozwiązanie:

1. W pliku html, gdzie załączasz skrypty .js, zamiast załączyć

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
[HTML] pobierz, plaintext 

to załącz

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery.lavalamp.js"></script>
[HTML] pobierz, plaintext 

2.Otwórz skrypt jquery.lavalamp.js i usuń z niego linie od 73 do 76.
Można usunąć więcej niepotrzebnych rzeczy, ale to wystarczy, aby linki zaczęły działać.

Pamiętaj, że stałe podświetlenie będzie aktywne dla elemenu <li class="current">.

Pozdrawiam.

Zrobiłem tak jak napisałeś, czyli usunąłem to:
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
i działa ale jak zrobić aby po kliknięciu w dany element podkreślenie zostało, a nie wracało na pierwszy?