5 replies to this topic

[szczurzecie]

Witam,
mam menu i chcial bym je lekko zmienic lecz nie potrafię.
http://buildinternet...nu-with-jquery/
To jest link do mojego menu
I teraz chciał bym aby po najechaniu poza wyswietleniem tego co sie wyświetla wyświetlił teks. Więc po najechaniu w czasie 500ms otwiera się podmenu i tuż po całkowitym otwarciu pokazuje sie tekst.
Znalazłem kody nawet ale nie wiem jak je umieścić by działały.
http://api.jquery.com/delay/
http://api.jquery.com/fadeIn/

Bardzo proszę o pomoc, z góry dziekuję.

[magik092]

Rozumiem, że tekst jest cały czas niewidoczny, po najechaniu menu się rozwija - tekstu dalej nie widać - po rozwinięciu pojawia się dopiero tekst?

[szczurzecie]

Tak, dokładnie.

[magik092]

Sprawa dość prosta, funkcja animate() jako oncomplete przyjmuje obiekt typu funkcję. Zgodnie z tym linkiem co podałeś będzie:

$(document).ready(function(){
	
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

	//Remove outline from links
	$("a").click(function(){
		$(this).blur()<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({opacity:1},{duration:1, complete:function(){$(this).children(".subtext").animate({opacity:1})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />}})
	})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:1, complete:function(){ $(this).children(".subtext").animate({opacity:0},{complete:function(){$(this).parent().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />}})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' /> }})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	
})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' /> 

W mouseout jest funkcja praktycznie nic nie robiąca (przypisuje po raz kolejny 150px height) ponieważ pierwsze musimy "ukryć" tekst, a istnieje pewien priorytet wykonywania funkcji (pozostawiam to własnej interpretacji/eksperymentom )

Dodatkowo w CSS zmiana:

.subtext{
	padding-top:15px;
	opacity: 0;
}

[szczurzecie]

Niestety nie działa to prawidłowo.
Po najechaniu nic się nie dzieje. Po zjechaniu zamiast zjechać na dół nagle sie pokazuje "podmenu" z wyświetlonym napisem lecz napis znika.

[magik092]

Sorki, popieprzyłem kolejność

$(document).ready(function(){
	
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

	//Remove outline from links
	$("a").click(function(){
		$(this).blur()<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce',complete:function(){$(this).children(".subtext").animate({opacity:1})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />}})
	})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({opacity:1},{duration:1, complete:function(){ $(this).children(".subtext").animate({opacity:0},{complete:function(){$(this).parent().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />}})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' /> }})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />
	
})<img src='http://forum.pcfoster.pl/public/style_emoticons/<#EMO_DIR#>/disagree.png' class='bbc_emoticon' alt=';' />