jQuery 切换动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/931113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery toggle animation
提问by Kevin Brown
I have this jQuery:
我有这个 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);
});
});
This is working fine, but I need to extend the functionality a little. I want to also similarly manipulate another div's properties in sync with the #panel div. I tried adding two more functions relating to the secondary div, but I just got a 4-phase toggle...haha! Forgive my ignorance!
这工作正常，但我需要稍微扩展一下功能。我还想与#panel div 同步操作另一个div 的属性。我尝试添加另外两个与二级 div 相关的函数，但我只得到了一个 4 阶段切换......哈哈！原谅我的无知！
Thanks guys!
谢谢你们！
回答by Vincent Ramdhanie
$('.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);
});
回答by John Darling
I dont think adding dual functions inside the toggle function works for a registered click event (Unless I'm missing something)
我不认为在切换功能中添加双重功能适用于注册的点击事件（除非我遗漏了一些东西）
For example:
例如：
$('.btnName').click(function() {
top.$('#panel').toggle(function() {
$(this).animate({
// style change
}, 500);
},
function() {
$(this).animate({
// style change back
}, 500);
});
回答by will
onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');"
onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');"
Just put two stops -- one onmouseover and one onmouseout.
只需停两下——一个 onmouseover 和一个 onmouseout。
