Forum PHP.pl > [JavaScript]Zmiana rozmiaru diva w js

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Zmiana rozmiaru diva w js

Pitter

29.04.2009, 17:31:30

Witam. Już jakiś czas główkuje nad tym jak zmienić szybko zmienić rozmiar diva. Przykład:

Div ma długość i wysokość równą 700px. Chce aby po kliknięciu w link zmienił swoje rozmiary do 10px. Nie pytajcie po co mi coś takiego, ponieważ w rzeczywistości tak to nie wygląda. Ok. Mam już taki kod:

Kod

function changeSize(width)
{
element.style.width = width;
if(width > 50) setTimeout(function() { changeSize(width++); }, 1);
}

Z grubsza tak to wygląda. I teraz problem polega na tym, że wszystko dzieje się za wolno. Nie wiem jak to przyśpieszyć. Czas jest ustawiony minimalnie.
Może macie jakiś inny pomysł? Może istnieje jakaś funkcja gotowa?

markac

29.04.2009, 18:26:50

java script:

Kod

$("div").one('click', function () {
$(this).width(30);
});

Polecam jQuery http://docs.jquery.com/CSS/width.

singles

29.04.2009, 21:33:22

@Pitter - nie napisałeś, że chcesz animować, chociaż na to wskazuje kod który podałeś. Zmiana rozmiaru w JS wygląda mniej więcej tak:

Kod

<html>
<head>
<script type="text/javascript">
function changeSize(el) {
    var currentWidth = parseInt(el.style.width);
    currentWidth++;
    el.style.width = currentWidth;
}
function runAnimation(el) {
    setInterval(changeSize, 100, el);
}
</script>
<body>
<div onclick="runAnimation(this)" style="border: 1px solid black; width: 500px; height: 500px">Tresc</div>
</body>
</html>

Ty robiłeś to za pomocą setTimeout, co wprowadza opóźnienie - jeśłi chodzi o wykonywanie co określony czas, to powinno się stosować setInterval. Oczywiście funkcja runAnimation powinna przyjmować drugi parametr, czyli końcowy rozmiar, który jeśli zostanie przekroczony w changeSize(), to wyłaczasz animację za pomocą clearInterval.

Jeśli nie chcesz animacji, to funkcja do zmiany rozmiaru wygląda następująco:

Kod

changeSize(element, size) {
element.style.width = size;
}

@markac - jQuery świetną biblioteką jest, ale uważam, że zaprzęganie jej tylko do zmiany rozmiaru mija się z celem

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.