problem z prostą animacją Opcje

[melior]

Jest o to taki sobie banalny skrypcik. Skrypt uaktywnia się, gdy najeżdżam na div'a myszką. Wąski pasek w postaci tła przejeżdża od lewej do prawej strony i ostatecznie pojawia się zawartość divów "cdiv" i "cdivm".
Wszystko teoretycznie działa, w praktyce jednak nie zawsze i chaotycznie.

Po pierwsze pasek ładuje się raz szybciej raz wolniej, nie wiem czemu.
Po drugie, czasami animacja wykonuje się dwa razy, czasami zapętla się bez końca.

Może ktoś kuknąć na to jednym okiem i powiedzieć gdzie popełniam błąd? Będę wdzięczny

Kod

<div onmouseover="start(<? echo $row['id'];?>)" onmouseout="stop(<? echo $row['id'];?>)" style="height:100px width:816px">

Kod

<div id="thediv<? echo $row['id'];?>" style="background-image:url(pasek<? echo $row['cat']; ?>dol.PNG);background-repeat:no-repeat;background-position:-816px 0px; height:1px; width:816px;">
</div>

Kod

var pos = 0;
var stop_anim = 0;
var x=-816;
var y=0;
var divio = 0;

function changePosition(posx)
{
var posy = 0;
pos = pos + posx;
if (stop_anim == 1) return 1;
if (pos == 816) {
    pos = 0;
    stop_anim = 1;    
    document.getElementById('cdiv'+divio).style.display = 'block';
    document.getElementById('cdivm'+divio).style.display = 'block';
    return 1;
}
document.getElementById('thediv'+divio).style.backgroundPosition=x+pos+"px "+y+"px";
setTimeout('changePosition(5)', 3);
}

function stop()
{
stop_anim = 1;
document.getElementById('thediv'+divio).style.backgroundPosition=x+"px "+y+"px";
document.getElementById('cdiv'+divio).style.display = 'none';
document.getElementById('cdivm'+divio).style.display = 'none';
}

function start(id)
{
stop_anim = 0;
divio = id;
pos = 0;
changePosition(1);    
}

[kamil4u]

Co w kodzie robi jakieś PHP(powinieneś przedstawić nam już kod wygenerowany przez przeglądarkę, gdyż nie będziemy się domyślać co masz w bazie)?

Spróbuj zamienić tą linkę:

Kod

if (pos == 816) {

na

Kod

if (pos >= 816) {
pos = 816;

Najlepiej pokaz, gdzieś demo tego skryptu, żebyśmy mogli zobaczyć jak to działa lub chociaż _cały_(w jednej części) kod, gdzie ścieżki są do plików znajdujących się gdzieś w necie.

EDIT
Spr. konsolę błędów!

Ten post edytował kamil4u 26.03.2010, 18:40:18

[melior]

Link do strony

Zauważyłem, że gdy najadę kursorem na miniaturkę to animacja wyświetla się poprawnie. Dobrze też jest gdy najadę na górę część danej ramki.

Nie rozumiem dlaczego animacja ładuje się jeszcze raz gdy przejdę z obrazka na ramkę obok, będę ruszał kursorem w obrębie całego elementu. onMouseOver i Out ustawiałem już na diva, który obejmuje całą tabelę, cały wiersz i cały czas jest tak samo.

No i również nierozwiązany pozostaje dla mnie problem, iż animacja pojawia się z różnym czasem. Raz wolniej, raz szybciej.

Może ktoś kuknąć na to swoim bystrym okiem? Pewnie to jakaś pierdółka, a ja pomimo długich godzin nie mogę jej dostrzec i zrozumieć

[kamil4u]

Problem polega na tym, że w JS przy zdarzeniach jest wiele problemów. Jednym z nich jest bubbling. W Twoim wypadku, jest, tak, że gdy najeżdżasz myszką w miejsce pojawienia się div-a "projekt blablala" to wywołuje się zdarzenie onMouseOut, bo wychodzisz z głównego elementu... Poczytaj: http://www.quirksmode.org/js/events_order.html

[melior]

Poczytałem, przebudowałem nieco stronkę i jest lepiej
Nie jest jednak jeszcze tak jakbym chciał :/

stronka

Jak najadę na obszar zaraz na prawo od miniaturki to tekst się nie zawsze pojawia.
A jak wyjadę na lewo czy prawo, poza całego diva, to już w ogóle głupieje :/