Forum PHP.pl > [HTML][CSS]Znikający i pojawiający się DIV po najechaniu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Znikający i pojawiający się DIV po najechaniu

roghatt

2.03.2011, 13:42:26

Witam
Jak zrobić aby wszystko co jest w divie znikało np. po 5 sekundach (jak kursor jest poza divem), jak najedziemy kursorem na div to wtedy wszystko się pojawia... aby te przejścia były płynne.
Jakieś strony z takimi podpowiedziami są?

pozdrawiam

thek

2.03.2011, 13:53:20

Słowa kluczowe: jquery hide show delay mouseenter mouseleave

roghatt

2.03.2011, 14:06:35

wlasnie nie chodzi o kliknięcie a o najechanie i zjechanie kursorem

poszukam z tymi słowami co podaliście

qrzysztof

2.03.2011, 14:14:15

JQuery rzeczywiście bardzo ułatwia. Ale jeśli nie, da się również samym JavaScriptem. Słowa kluczowe:

onmouseout
setTimeout(function(){}, 5000)
style.display='none'

roghatt

2.03.2011, 14:18:08

samym JS próbowałem, ale div mi po 5 sekundach znika, ale później nie wiem jak zrobić aby się znowu pojawił jak kursor pojawi się w okolicach tego diva.

thek

2.03.2011, 14:29:52

Wtedy musisz dla obiektu przypisać display:block a div się powinien pojawić. Problemem jest to, że najlepiej robić to tak: ustawiasz sobie jakiś element, na który najeżdżając pojawia się div, gdy z niego schodzisz, to po 5 sekundach ów div znika. Nie możesz zrobić bezpośrednio po najechaniu na div konkretny tego znikania i pojawiania, ponieważ gdy dasz display:none, to zniknie on z drzewa struktury dokumentu i nie będzie możliwe jego "najechanie", bo nie da się najechać na coś, co nie istnieje. Musisz mieć jakiś najeżdżalny "element pomocniczy".

papryk

2.03.2011, 14:36:20

[HTML] pobierz, plaintext 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
		$('#hideMe').mouseleave(function(){								 
											 $(this).fadeOut(500);	 
										 })	
		$('#showMe').mouseenter(function(){								 
											 $('#hideMe').fadeIn(500);	 
										 })				   
						   });
</script>
</head>
<body>
<div id="showMe"  style="width:200px; height:200px;">
<div id="hideMe" style="width:200px; height:200px; background-color:#060;"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Takie coś wymyśliłem, pozdrawiam.

thek

2.03.2011, 16:03:46

Czyli użyłeś dokładnie tego papryk co napisałem tyle że zamiast show i hide użyłeś innego efektu... ale zapomniałeś jeszcze użyć delay()
$(this).delay(5000).fadeOut(500);
Powinno załatwić sprawę zamknięcia po 5 sekundach od wyjechania z pola.

-jagon-

7.12.2011, 18:18:59

Odkopuję stary temat:) Wszystko działa, pytanko tylko co zrobić w przypadku 3 takich divów? w jaki sposób nadać skryptowi odpowiednie właściwości, dzięki czemu, do każdego diva z osobna będzie przypisywana inna tablica.

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.