2009-05-31 40 views
24

ho questo jQuery:jQuery ginocchiera animazione

$(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); 
    }); 
}); 

Questo funziona bene, ma devo estendere la funzionalità un po '. Voglio anche manipolare in modo simile le proprietà di un altro div in sincronizzazione con il #panel div. Ho provato ad aggiungere altre due funzioni relative al div secondario, ma ho appena ottenuto un interruttore a 4 fasi ... haha! Perdona la mia ignoranza!

Grazie ragazzi!

+0

Perché non è possibile aggiungere il codice per manipolare questo secondo DIV nelle prime due funzioni? Mi sto perdendo qualcosa? –

+0

No, mi mancava! Sono un noob jscript. –

risposta

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 ... non posso credere di averlo perso! Molte grazie! –

+2

Questa funzione è obsoleta a partire da JQuery 1.8 e rimossa in JQuery 1.9. http://api.jquery.com/toggle-event/#entry-longdesc – Xtrinity

6

Non credo che l'aggiunta di una duplice funzione all'interno della funzione di commutazione lavora per un evento registrato clicca (A meno che non mi manca qualcosa)

Ad esempio:

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

quindi, cosa stai cercando di dire? non penso che sia utile dare al codice quel lavoro dosato e dire "Oh, è un lavoro diligente". pubblicare una soluzione reale. – Dementic

+0

Penso che sia utile dare al codice quel lavoro dosato e dire "Oh, funziona con dosaggi". – Alireza

+0

Questa funzione è obsoleta a partire da JQuery 1.8 e rimossa in 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');" 

Basta mettere due fermate: una onmouseover e una onmouseout.

+1

L'utilizzo di JavaScript inline non è un buon esempio. Se stai già usando jQuery, usa invece i gestori di eventi. – akluth