[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 ?

[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