[jquery] animacja tla Opcje

[propage]

używam takiego skryptu do hoverów menu:

[PHP] pobierz, plaintext 
<?php
$('#menu_poziome a')
        .mouseover(function(){
            $(this).stop().animate(
                {backgroundPosition:"0px 10px"}, 
                {duration:1500})
            })
        .mouseout(function(){
            $(this).stop().animate(
                {backgroundPosition:"0px 0px"}, 
                {duration:500})
            })
?>
[PHP] pobierz, plaintext 

Skrypt nie działa niestety tz zmienia się pozycja tła tak jak powinna, ale nie jest robione to płynnie, tylko dziala to tak jak zwykły hover.

Ktos ma pomysl dlaczego tak sie dzieje ?

[wookieb]

Zabawmy się w znajdź rożnice...
http://docs.jquery.com/Effects/animate#par...neasingcallback

[erix]

Daj gdzieś ten skrypt na żywo.

Poza tym, używaj właśnie zdarzenia hover, a nie mouseover/out.

[propage]

ok przegralem gre, a gdzie jest roznica?

[wookieb]

$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );

// ------------------------

$(this).stop().animate(
{backgroundPosition:"0px 0px"},
{duration:500})

//brak bbcode bo w code nie mozna ustawic stylowania czcionki

ok przegralem gre

1:0 dla mnie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) będę liczył (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Ten post edytował wookieb 8.07.2009, 20:21:14

[propage]

zmieniłem, jednak nie robi to żadnej różnicy. co ciekawego zauważyłem że jeśli zmienię animacje z z góry nad dół "0px -10" na lewo prwawo "80px 0px" wtedy działa płynnie.

Ten post edytował propage 9.07.2009, 12:30:05

[erix]

Daj ten skrypt na żywo.

[propage]

ok http://propage.pl/projekt/torebka/indexHMTL.html animowane powinny byc linki w glownym menu "strona glowna promocje ... "

Ten post edytował propage 9.07.2009, 15:47:06

[wookieb]

Chyba potrzebujesz tego http://www.corrupt-system.de/jquery/backgroundPosition/

[propage]

tz? tak jak mowie u mnie nie dziala animacja tla gora-dul, dziala za to lewo-prawo, tego skryptu, ktory przeslales probowalem tez

[TbQ]

Także borykałem się z problemem braku animacji poziomej z użyciem funkcji jquery animate() backgroundPosition.
Rozwiązanie możesz znaleźć na tej stronce:
http://snook.ca/technical/jquery-bg/
Powinien zainteresować Cię przykład A.

Zajrzyj w kod źródłowy - dołącz do swoich skryptów plik http://snook.ca/technical/jquery-bg/jquery.bgpos.js
i powinno zadziałać - bynajmniej u mnie się naprawiło (IMG:style_emoticons/default/biggrin.gif)


Pozdrawiam.

PS: treść pliku, jakby zniknął z FTP'a

CODE

/**
* @author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);

Ten post edytował TbQ 10.08.2009, 15:03:42