Źle, źle, wszystko źle
. Zacznijmy od tego, że nie podałeś warunku przerwania dla funkcji rozwijanie więc to wywołanie w setInterval() nigdy się nie kończy. Po drugie, zrobiłbym raczej coś w tym guście:
function expand(id, tempHeight) {
var elem = document.getElementById(id);
if(parseInt(elem.style.height) >= 340) {
clearInterval(interval);
return;
}
tempHeight = parseInt(elem.style.height) + 2;
elem.style.height = tempHeight + 'px';
}
window.onload = function() {
interval = null;
var tempHeight = 0;
var id = 'twoje id';
var elem = document.getElementById(id);
elem.onmouseover = function() {
interval = setInterval('expand(' + id + ', ' + tempHeight + ')', 50);
}
elem.onmouseout = function() {
clearInterval(interval);
}
}
jQuery upośledziło moją znajomość js więc nie krzycz jak będą jakieś błędy - w końcu jesteś programistą, to i powinieneś umieć je wychwycić, a sam algorytm jest dobry
. Po trzecie, tak jak zaproponował kolega wyżej - możesz to zrobić właśnie w jQuery:
$("#test").animate({"height":"200px"}, 50); //drugi argument to interwał
ps.
W IE ci nie działało, bo nie miało prawa - przecież najpierw wywołujesz funkcję bez argumentów, więc tak na prawdę ona nic nie robi i w dodatku trwa to bez końca. Potem wywołałeś pętlę, a one działają błyskawicznie i dlatego właśnie wysokość ci przeskoczyła, zamiast płynnie się zmieniać. W FF było inaczej, bo to inna przeglądarka więc i silnik js wygląda nieco inaczej. A w ogóle, to w takich wypadkach polecam zapisać sobie na kartce co robi napisany przez siebie skrypt - prześledzić krok po kroczku, gdzie w danym momencie się znajdujemy. Mi to zawsze pomaga...
EDIT:
Nie wiedziałem do jakiego stopnia zapomniało mi się javascriptu dopóki nie przetestowałem tego co napisałem wcześniej, ale teraz już musi działać
.
