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ę.
jQuery [JS] dodanie kodu
Rozpoczęty przez szczurzecie, 18 kwi 2012 01:50
5 odpowiedzi w tym temacie
#1
Napisano 18 kwiecień 2012 - 01:50
#3
Napisano 18 kwiecień 2012 - 10:59
Tak, dokładnie.
#4
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:
Dodatkowo w CSS zmiana:
$(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; }
#5
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.
Po najechaniu nic się nie dzieje. Po zjechaniu zamiast zjechać na dół nagle sie pokazuje "podmenu" z wyświetlonym napisem lecz napis znika.
#6
Napisano 18 kwiecień 2012 - 19:38
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=';' />
Użytkownicy przeglądający ten temat: 2
0 użytkowników, 2 gości, 0 anonimowych