jquery动画篇1-3， #a1设置display: none !important，然后再 $("#a1").css('display', 'block !important'); $("#a1").show(3000); }); 为什么动画不能显示-慕课网

首页课程实战体系课手记专栏慕课教程

jquery动画篇1-3， #a1设置display: none !important，然后再 $("#a1").css('display', 'block !important'); $("#a1").show(3000); }); 为什么动画不能显示

来源：1-3 jQuery中显示元素的show方法

慕粉studying

2016-11-11 14:14

<!DOCTYPE html>

<html>

<head>

<style>

.left div,

.right div {

width: 500px;

height: 50px;

padding: 5px;

margin: 5px;

float: left;

border: 1px solid #ccc;

}

.left div {

background: #bbffaa;

}

.right div {

background: yellow;

}

#a1{display:none !important;}

</style>

</head>

<body>

<button>直接hide-show动画</button>

//点击button

//执行3秒隐藏

//执行3秒显示

$("button").click(function() {

$("#a1").css('display', 'block !important');

$("#a1").show(3000);

});

</script>

</body>

</html>

写回答关注

6回答

慕移动9181930

2022-03-23 05:25:08

xcode6.1已经是正式版了，闪退问题应该少了很多～亲，第一季的课程是视频代码编辑器哦，所以第二章之后的内容是要在网站上通过代码编辑器学习的哦

0 0
Spiner_0

2018-03-17 11:19:02

http改成https

0 0
_Rainy

2018-01-19 12:34:52

加了这个!important，show方法就不能把display来回切换了需要你自己显示然后show方法提供动画从 width=0和height=0变会原来值，就是说你需要自己用disoaly:block !important显示出来但是显示出来了盒子宽高还是0 ，需要继续动画变会原来的值。

0 0
Robert_Langdon

2017-07-03 23:43:08

这个问题挺无解的，教程方法二肯定错的，我用attr('style','display:block !important')虽然样式可以切换了，但没有动画效果了，show（）加不加，动画效果都一样

0 0
JoKer49

2017-04-07 17:17:19

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }

    .left div {
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    #ai {
        display:none!important;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>hide-show</h2>
    <div class="left">

        <div id="a1">hide-show</div>
        <button>直接hide-show动画</button>
    <script type="text/javascript">
    //点击button
    //执行3秒隐藏
    //执行3秒显示
/*   $("button").click(function() {
        var flag=1;
        while(flag=2)
        {
             $("#a1").hide(3000).show(3000)
        }

    });*/
    $('#a1').on('mousedown mouseclick',function(){
       $('#a1').css('display', 'block !important');
        $("#a1").hide(3000).show(3000)
    })
    </script>
</body>
</html>

4 0

旋律丶秋凉回复JoKer4...

我说就你这水平还来写代码？自己写的代码调过了没有就敢发出来？!important提升了display:none的优先级，再用show能显示？就这水平还来回答问题？

2017-08-31 14:55:16

共 4 条回复 >
qq_缘大寳_0

2016-11-11 15:14:02

if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}

1 0

淡水狗

代码没反应

2017-07-19 15:28:03

共 1 条回复 >