Forum PHP.pl > [jquery] animacja tla

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

propage

8.07.2009, 18:27:50

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

8.07.2009, 18:34:02

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

erix

8.07.2009, 18:34:22

Daj gdzieś ten skrypt na żywo.

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

propage

8.07.2009, 20:16:19

ok przegralem gre, a gdzie jest roznica?

wookieb

8.07.2009, 20:18:52

$("#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

Cytat

ok przegralem gre

1:0 dla mnie

będę liczył

propage

9.07.2009, 12:10:58

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.

erix

9.07.2009, 14:48:12

Daj ten skrypt na żywo.

propage

9.07.2009, 15:42:50

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

wookieb

9.07.2009, 16:03:51

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

propage

9.07.2009, 16:41:22

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

TbQ

10.08.2009, 14:58:52

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

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);

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.