为了账号安全,请及时绑定邮箱和手机立即绑定

本节的例题:两张图片同时消失,消失后就不会再出现了,这是怎么回事啊?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>7.5使用slideToggle()方法实现图片“变脸”效果</title>
        <meta charset=utf-8>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        
    </head>
    
    <body>
        <h3>使用slideToggle()方法实现图片“变脸”效果</h3>
        <div id="divtest1">
            <img src="https://www.baidu.com/img/bdlogo.png" alt="" />
        </div>
        <div id="divtest2">
            <img src="http://www.yiso.me/images/1.jpg" alt="" />
        </div>
        <script type="text/javascript">
        $(function  () {
            var $div1 = $("#divtest1");
            var $div2 = $("#divtest2");
            $div1.bind("click", function() {
                $div1.slideToggle(1000,function  () {
                    $div2.slideToggle(1000);
                });
            });
            $div2.bind("click", function() {
                $div2.slideToggle(1000,function  () {
                    $div1.slideToggle(1000);
                });
            });
        });
        </script>
    </body>
</html>

我把例子做了一下,但是发现两张图片同时消失,消失后就不会再出现了,这是怎么回事啊?

正在回答

2 回答

学习啦

0 回复 有任何疑惑可以回复我~

//点哪个消失再显示哪个

    $(function  () {
            var $div1 = $("#divtest1");
            var $div2 = $("#divtest2");
            $div2.bind("click", function() {
                $div2.slideToggle(1000,function  () {
                    $div2.slideToggle(1000);
                });
            });
        $div1.bind("click", function() {
                $div1.slideToggle(1000,function  () {
            $div1.slideToggle(1000);
           
                });
            });
            
        });

//全部都消失,然后再显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>7.5使用slideToggle()方法实现图片“变脸”效果</title>
        <meta charset=utf-8>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        
    </head>
    
    <body>
        <h3>使用slideToggle()方法实现图片“变脸”效果</h3>
    <div id="img">
        <div id="divtest1">
            <img src="https://www.baidu.com/img/bdlogo.png" alt="" />
        </div>
        <div id="divtest2">
            <img src="http://www.yiso.me/images/1.jpg" alt="" />
        </div>
    </div>
        <script type="text/javascript">
      $(function  () {
            var $div1 = $("#img");
        $div1.bind("click", function() {
                $div1.slideToggle(1000,function  () {
            $div1.slideToggle(1000);
                });
            });
            
        });

        </script>

    </body>
</html>

0 回复 有任何疑惑可以回复我~
#1

青霜 提问者

先谢谢你的回答了!可能之前看的有点匆忙,没看到评论里说例题的代码有问题。你的回答里第一个没问题,第二个有点错误: var $div1 = $("#img");,应该去掉“#”号,而且效果要先消失然后显示再消失。我作了下修改:
2015-08-24 回复 有任何疑惑可以回复我~
#2

青霜 提问者

$(function() { var $div1 = $("img"); $div1.bind("click", function() { $div1.slideToggle(1000); $div1.slideToggle(1000); }); });
2015-08-24 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

本节的例题:两张图片同时消失,消失后就不会再出现了,这是怎么回事啊?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信