jQuery chuyển đổi hình ảnh động

Question

Tôi có điều này jQuery:

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

này đang làm việc tốt, nhưng tôi cần phải mở rộng chức năng một chút. Tôi cũng muốn thao tác tương tự các thuộc tính khác của div đồng bộ với div #panel. Tôi đã thử thêm hai chức năng liên quan đến div thứ cấp, nhưng tôi chỉ có một chuyển đổi 4 pha ... haha! Tha thứ cho sự thiếu hiểu biết của tôi!

Thanks guys!

Answer 1

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

Answer 2

Tôi không nghĩ rằng việc thêm chức năng kép bên trong hàm chuyển đổi làm việc cho một sự kiện nhấp chuột đăng ký (Trừ khi tôi là thiếu một cái gì đó)

Ví dụ:

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

Answer 3

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

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

Chỉ cần đặt hai điểm dừng - một lần bật và một lần bật.