课程的事例是否有误?
我随便找了两张图片来实验示例中的代码，但是运行结果是两张图片都向上滑动隐藏起来了，因为本来HTML的结构就是两张图片都处于显示状态的，反正我无法做到课程所说的变脸效果。
kelvinwong
2016-03-11
2 回答
<!DOCTYPE html>
<html>
<head>
<title>使用slideToggle()方法切换滑动效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<style>
div {
/* 两张图片重叠 才能看到变脸效果 */
position: absolute;
}
#img2 {
/* 页面只能同时显示一张图片,用于点击,触发事件 */
display: none;
}
</style>
<body>
<!-- 图片需要一个容器,不然就是缩放效果,而不是滑动效果 -->
<div id="img1">
<img src="http://static.mukewang.com/static/img/common/logo.png" />
</div>
<div id="img2">
<img src="http://img1.sycdn.imooc.com//user/5458508600019e2602200220-40-40.jpg" />
</div>
<script type="text/javascript">
$(function() {
$("#img1").bind("click", function() {
// 一张图片隐藏后,另一张再显示
$("#img1").slideToggle(1000, function() {
$("#img2").slideToggle(1000);
})
});
$("#img2").bind("click", function() {
$("#img2").slideToggle(1000, function() {
$("#img1").slideToggle(1000);
})
})
});
</script>
</body>
</html>
举报
0/150
提交
取消
