Forum PHP.pl > [JavaScript][CSS][PHP][?]Animacja ładowania strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS][PHP][?]Animacja ładowania strony

c3309764

25.12.2013, 22:06:43

Witam!
Nie mam zbytniego doświadczenia z JS, ale chciałbym zrobić stronę, na której po kliknięciu w link ładuje się nowy CSS i kod strony. Wymienione 2 rzeczy już mam, lecz trapi mnie jak zrobić to aby strona ładowała się w ten sposób:

Wszystko ma przebiegać w płynny sposób:

1. Rozszerza się div z 300px do 900px
2. Ładuje się logo (fade)
3. Ładuje się reszta strony (fade)

Czy jest coś takiego możliwe?
Z góry dziękuje.

Turson

25.12.2013, 22:23:31

[HTML] pobierz, plaintext 
<html>
<head>
	<script src="libs/jquery.js"></script>
	<style>
	#old { background:yellow;width:300px;height:100px}
	#new { background:red;width:600px;height:100px}
	#link { cursor:pointer}
	#logo { background-color:green;padding:20px;display:none}
	</style>
</head>
<body>
<div id="link">nowy css</div>
<div id="old">
	<div id="logo">logo</div>
</div>
 
 
<script>
jQuery(document).ready(function(){
    $('#link').click(function(){
           $('#old').attr('id','new');
           $('#logo').fadeIn();
    });
});
</script>
[HTML] pobierz, plaintext

PrinceOfPersia

26.12.2013, 00:54:24

po kiego grzyba id zmieniac??
takie rzeczy się zwykle na klasach robi (id do czego innego zupełnie służy):
$('#identyfikator-diva').removeClass('old').addClass('new')
tyle, że w stylach musi być w tym wypadku kropka zamiast krzyżyka (.old .new zamiast #old #new)

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.