[jQuery] Zdarzenie po określonym czasie, z warunkiem utrzymania ciągłości Opcje

[Adi32]

Witajcie.

Nie mogłem znaleźć konkretnej odpowiedzi choć szukałem długo.

Od dawna zastanawia mnie jak zrobić coś takiego - najlepiej jak opiszę na przykładzie.

Kod

$('.costam').hover( function() {
    $('.popup').pokaz();
}, function {
    $('.popup').wywal();
} )

Jak widać po najechaniu na '.costam' costam sie pojawi. Jak zrobić, żeby popup pojawił się ale tylko w tedy jak kursor będzie wisiał nad 'costam' przez określoną ilość sekund? I żeby wcale się nie pokazywał jeżeli się rozmyśle i ucieknę kursorem?

Druga sprawa, użyłem tutaj funkcji pokaz() i wywal() które nie istnieją, jak pisać funkcje żeby można było je w ten sposób wywoływać na danych obiektach?
Normalnie bym zrobił:

Kod

$('.popup').css('display','block');
// lub
$('.popup').show();

...

Ten post edytował Adi32 21.09.2012, 11:07:21

[Arcioch]

Polecam ten plugin (IMG:style_emoticons/default/wink.gif) hoverIntent Łatwy do ustawiania (IMG:style_emoticons/default/wink.gif) stosuje się go prawie tak samo ja zwykły hover w jQuery. Możesz również użyć funkcji delay() aby opóźnić wykonanie funkcji pokaz() (IMG:style_emoticons/default/wink.gif)

Odpowiedz na drugie pytanie (IMG:style_emoticons/default/wink.gif)

[HTML] pobierz, plaintext 
jQuery(document).ready(function() {
 
	$.fn.ukryj = function() {
		$('.popup').css({"display": "block"});
	};
 
});
[HTML] pobierz, plaintext 

Ten post edytował Arcioch 21.09.2012, 11:36:31

[Adi32]

Polecam ten plugin (IMG:style_emoticons/default/wink.gif) hoverIntent Łatwy do ustawiania (IMG:style_emoticons/default/wink.gif) stosuje się go prawie tak samo ja zwykły hover w jQuery. Możesz również użyć funkcji delay() aby opóźnić wykonanie funkcji pokaz() (IMG:style_emoticons/default/wink.gif)

Odpowiedz na drugie pytanie (IMG:style_emoticons/default/wink.gif)

[HTML] pobierz, plaintext 
jQuery(document).ready(function() {
 
	$.fn.ukryj = function() {
		$('.popup').css({"display": "block"});
	};
 
});
[HTML] pobierz, plaintext 

Ad. 1:
Dzięki, skrypt na pewno się przyda, jednak i tak jestem ciekaw jak osiągnąć taki efekt przy pomocy samego jQuery.

Ad. 2:
Rozumiem, że po stworzeniu takiej funkcji, będę jej mógł używać na dowolnym obiekcie aby go ukryć|pokazać i inne takie?
edit: mała zmiana i działa jak chciałem - dzięki

Ten post edytował Adi32 21.09.2012, 11:44:42

[Arcioch]

ad1. Taki prosty przykład ze zmianą czasu po najechaniu myszką na div o id=box. Tło zmieni się tylko wtedy jeżeli myszka będzie znajdować się na elemencie dłużej niż czas określony przez funkcję setTimeout().

[HTML] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
 
jQuery(document).ready(function() {
 
 
	var myTimeout;
	$('#box').mouseenter(function() {
		myTimeout = setTimeout(function() {
			$('#box').css({"background":"green"});
		}, 1000);
	}).mouseleave(function() {
		clearTimeout(myTimeout);
	});
 
 
 
});
 
</script>
 
<div id="box" style="display: block; width: 100px; height: 400px; background: red;"></div>
[HTML] pobierz, plaintext 

[Adi32]

O to chodziło. Coś mi się obiło z "clearTimeout(myTimeout);" a teraz wiem dokładnie. Dzięki.