2009-05-31 17 views
24

mam tego jQuery:jQuery animacja przełączania

$(document).ready(function() 
{ 
    $("#panel").hide(); 

    $('.login').toggle(
    function() 
    { 
     $('#panel').animate({ 
     height: "150", 
     padding:"20px 0", 
     backgroundColor:'#000000', 
     opacity:.8 
}, 500); 
    }, 
    function() 
    { 
     $('#panel').animate({ 
     height: "0", 
     padding:"0px 0", 
     opacity:.2 
     }, 500); 
    }); 
}); 

to działa dobrze, ale muszę rozszerzyć funkcjonalność trochę. Chcę również w podobny sposób manipulować właściwościami innego div w synchronizacji z div #panel. Próbowałem dodać dwie dodatkowe funkcje związane z dodatkowym div, ale właśnie dostałem 4-fazowy przełącznik ... haha! Przebacz mojej niewiedzy!

Dzięki chłopaki!

+0

Dlaczego nie możesz dodać kodu do manipulowania tym drugim DIV wewnątrz dwóch pierwszych funkcji? Czy czegoś brakuje? –

+0

Nie, tęskniłem za tym! Jestem noobem jscript. –

Odpowiedz

49
$('.login').toggle(
    function(){ 
     $('#panel').animate({ 
      height: "150", 
      padding:"20px 0", 
      backgroundColor:'#000000', 
      opacity:.8 
     }, 500); 
     $('#otherdiv').animate({ 
      //otherdiv properties here 
     }, 500); 
    }, 
    function(){ 
     $('#panel').animate({ 
      height: "0", 
      padding:"0px 0", 
      opacity:.2 
     }, 500);  
     $('#otherdiv').animate({ 
      //otherdiv properties here 
     }, 500); 
}); 
+0

Ahh ... Nie mogę uwierzyć, że to przegapiłem! Wielkie dzięki! –

+2

Ta funkcja jest przestarzała od wersji JQuery 1.8 i usunięta w JQuery 1.9. http://api.jquery.com/toggle-event/#entry-longdesc – Xtrinity

6

nie sądzę dodając dwie funkcje wewnątrz funkcji przełączania działa na imprezę zarejestrowanym click (chyba że jestem brakuje czegoś)

na przykład:

$('.btnName').click(function() { 
top.$('#panel').toggle(function() { 
    $(this).animate({ 
    // style change 
    }, 500); 
    }, 
    function() { 
    $(this).animate({ 
    // style change back 
    }, 500); 
}); 
+1

więc, co próbujesz powiedzieć? Nie sądzę, że pomocne jest podanie kodu, który działa, i powiedzenie "Och, to nie działa". opublikuj prawdziwe rozwiązanie. – Dementic

+0

Wydaje mi się, że warto podać kod, który działa, i powiedzieć "Oh, it dosent work". – Alireza

+0

Ta funkcja jest przestarzała od JQuery 1.8 i usunięta w JQuery 1.9. http://api.jquery.com/toggle-event/#entry-longdesc – Xtrinity

-7
onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');" 

onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');" 

Wystarczy umieścić dwa przystanki - jeden onmouseover i jeden onmouseout.

+1

Korzystanie z wbudowanego JavaScriptu nie jest dobrym wzorcem. Jeśli używasz już jQuery, użyj programów obsługi zdarzeń. – akluth