Skocz do zawartości


Zdjęcie

jQuery [JS] dodanie kodu


  • Zaloguj się, aby dodać odpowiedź
5 odpowiedzi w tym temacie

#1 szczurzecie

szczurzecie
  • Użytkownicy
  • 72 postów

Napisano 18 kwiecień 2012 - 01:50

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ę.
  • 0


#2 magik092

magik092
  • Użytkownicy
  • 1555 postów

Napisano 18 kwiecień 2012 - 07:47

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

Dołączona grafika


#3 szczurzecie

szczurzecie
  • Użytkownicy
  • 72 postów

Napisano 18 kwiecień 2012 - 10:59

Tak, dokładnie.
  • 0

#4 magik092

magik092
  • Użytkownicy
  • 1555 postów

Napisano 18 kwiecień 2012 - 16:29

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 :D)

Dodatkowo w CSS zmiana:
.subtext{
	padding-top:15px;
	opacity: 0;
}

  • 0

Dołączona grafika


#5 szczurzecie

szczurzecie
  • Użytkownicy
  • 72 postów

Napisano 18 kwiecień 2012 - 18:49

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.
  • 0

#6 magik092

magik092
  • Użytkownicy
  • 1555 postów

Napisano 18 kwiecień 2012 - 19:38

Sorki, popieprzyłem kolejność xD
$(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=';' />

  • 0

Dołączona grafika



Użytkownicy przeglądający ten temat: 3

0 użytkowników, 3 gości, 0 anonimowych