我有 4 盒。将鼠标悬停在其中一个上时，其他 3 个将被隐藏，而悬停的那个将被展开。然而，扩展部分没有发生，因为我的回调没有被触发!
代码:(此处 fiddle :http://jsfiddle.net/CpKLk/5/)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("div#Content div").hover(function ()
{
var toShow = $(this);
toShow.siblings().hide("swing", null, "slow", function ()
{
//Never gets here!
toShow.addClass("Expanded");
alert("Changing class!");
});
}, function ()
{
var toShow = $(this);
toShow.siblings().show("swing", null, "slow", function ()
{
//Never gets here!
toShow.removeClass("Expanded");
alert("Changing class!");
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<style type="text/css">
div#Content
{
white-space: nowrap;
}
div#Content div
{
width: 100px;
height: 100px;
display: inline-block;
}
div#Content div#Box1
{
background-color: red;
}
div#Content div#Box2
{
background-color: blue;
}
div#Content div#Box3
{
background-color: green;
}
div#Content div#Box4
{
background-color: pink;
}
div#Content div.Expanded
{
width: 100%;
}
</style>
</head>
<body>
<div id="Content">
<div id="Box1"></div>
<div id="Box2"></div>
<div id="Box3"></div>
<div id="Box4"></div>
</div>
</body>
</html>
最佳答案
.hide() 接受的参数必须按以下顺序排列:持续时间、缓动、回调 ( http://api.jquery.com/hide/ )
这是您的示例的更新后的 jsFiddle : http://jsfiddle.net/CpKLk/7/
.hide() 调用的完成方式如下:
hide("slow","swing", function (){ ... });
.show() 必须以相同的方式调用。
关于jQuery 显示/隐藏不触发回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13879822/