                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

必须点击俩次<h4>标题，第二次才出来效果

为啥第一次点击没有淡入淡出，而第二次点击就可以呢？ $(function(){})这个方法不是进入页面马上就自动加载了麽？测试了其他同学的代码也是这样，难道是我浏览器的问题？我用的谷歌浏览器啊、、

小白_小伍

2015-08-10

源自：jQuery基础课程 7-4

关注问题我要回答

649

操作

收起

4 回答

曹妍真瘦回答被采纳 +3 积分
2015-08-12

if ($("#hidval").val() == 0) 最开始这个条件成立，点击后执行里面的代码，ul开始时是显示的，显示的只能用slideUp先隐藏。而你第一次点击用了slideDown没有效果，第一次点击后$("#hidval").val() 变为1，再次点击执行else中的代码才执行了你写的slideUp。

注意教程里：要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。

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

收起回答

小白_小伍提问者

非常感谢！

2015-11-04 回复有任何疑惑可以回复我~

YoungforU
2015-11-02

slideDown 和 slideUp 写反了

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

收起回答

小白_小伍提问者
2015-08-12

<!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>使用slideUp()和slideDown()方法的滑动效果</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>使用slideUp()和slideDown()方法的滑动效果</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").slideDown(3000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").slideUp(3000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>
    </body>
</html>

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

收起回答

曹妍真瘦

不是浏览器的问题

2015-08-12 回复有任何疑惑可以回复我~