Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Płynna zmiana tła bloku div - JQUERY
Forum PHP.pl > Forum > Przedszkole
kacpero1094
Na wstępie powiem, że zrobiłem sobie w PHP skrypt, który wylosuje zdjęcie, doda do niego ramkę, która jest zapisana w osobnym pliku i zwróci całość. Ten plik ustawiłem jako tło dla jednego bloku div. Teraz chciałbym zrobić, żeby skrypt płynnie co 15-20 sek zmieniał zdjęcia na tle.
Próbowałem czymś takim to zrobić:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(
  2. function() {
  3. setTimeout(function() {
  4. $("#top").fadeOut("slow",function() { document.getElementById('top').style.background="transparent url('topBackground.php') no-repeat"; });
  5. $("#top").fadeIn("slow");
  6. },15000);
  7. }
  8. );
[JAVASCRIPT] pobierz, plaintext
Grze_chu
Robiłem coś takiego na www.r-style.com.pl

Jeżeli choć trochę ogarniasz tematyke, to będziesz wiedział o co biega biggrin.gif

Pozdro, i owocnej pracy

BTW. nie korzystasz z dobrodziejstw jQuery.... poczytaj o css() i animate()
kacpero1094
Takie coś już robiłem. Problem tkwi w tym, że ten obrazek jest w tle. Tzn:
  1. #top {
  2. background: transparent url('topBackground.php') no-repeat;
  3. width: 100%;
  4. height: 666px;
  5. }

I teraz po 15 sekundach chcę przeładować tło. Żeby ten plik topBackground.php wczytał się jeszcze raz (wylosował inne zdjęcie).
I nie wiem jak sobie z tym poradzić. Bo on tak naprawdę nie widzi różnicy.
erix
Przeglądarka Ci pewnie cache'uje.

Dopisz do nazwy coś po znaku zapytania, np. topBackground.php?2749325.
kacpero1094
Zrobiłem tak i teraz jest dobrze. Ale drugie zdjęcie zanim się wczyta, wykonywana jest funkcja fadeIn(). Co zrobić, aby najpierw wczytywało się zdjęcie, a dopiero potem została wykonana funkcja fadeIn()?
Mam taki kod:
[JAVASCRIPT] pobierz, plaintext
  1. function resetBackground() {
  2. var time=new Date();
  3. var bckg="transparent url('images/topBackground.php?" + time.getMinutes() + ':' + time.getSeconds() + "') no-repeat";
  4. document.getElementById('top').style.background=bckg;
  5. }
  6. $(document).ready(
  7. function() {
  8. setInterval(function() {
  9. $("#top").fadeOut("slow",function() { resetBackground(); });
  10. $("#top").fadeIn("slow");
  11. },10000);
  12. }
  13. );
[JAVASCRIPT] pobierz, plaintext
erix
onload.
kacpero1094
Tylko gdzie to onload dać?
erix
Albo dla całości, albo dla obrazka. Poeksperymentuj, na tacy ode mnie nie dostaniesz. Masz wskazówkę, składaj zegarek. tongue.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.