display:none影片顯示問題-有解無憂

<!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;
    }

    #a1{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() {
        $("#a1").css('display', 'block !important');
        $("#a1").show(3000);
    });

    </script>
</body>

</html>

uj5u.com熱心網友回復：

點擊事件里面的重復了吧

uj5u.com熱心網友回復：

參考 1 樓瀚娃娃的回復:

點擊事件里面的重復了吧

不是這個問題，是設定了display:none以后，影片效果就失效了，然后用jquery設定show()影片效果也沒得

uj5u.com熱心網友回復：

你這是延遲3秒顯示，不是特效如果要淡入淡出可以使用fadeIn()
fadeOut()

uj5u.com熱心網友回復：

#a1{display:none !important;}
去掉!important
就可以
$("#a1").css('display', 'block !important')
這個也是多余的

uj5u.com熱心網友回復：

把 #a1{}里面的"!important"去掉，不要帶這，js里面也不要帶

uj5u.com熱心網友回復：

想要隱藏的東西可以用opcially 去做，想要影片效果可以用CSS3的transition去做影片效果，這樣兼容性可能會高點

uj5u.com熱心網友回復：

參考 6 樓瘦肉蛋的回復:

想要隱藏的東西可以用opcially 去做，想要影片效果可以用CSS3的transition去做影片效果，這樣兼容性可能會高點

opcially他只是隱藏了，但是還是占位置，沒用啊

uj5u.com熱心網友回復：

參考 7 樓 qq_45758163 的回復：

Quote: 參考 6 樓瘦肉蛋的回復:
想要隱藏的東西可以用opcially 去做，想要影片效果可以用CSS3的transition去做影片效果，這樣兼容性可能會高點

opcially他只是隱藏了，但是還是占位置，沒用啊

那你的點擊事件生效嗎？試試點擊alert一個東西看看

uj5u.com熱心網友回復：

建議不要用這種寫法 css3的transition 或者你現在juqery里面的 fadeIn fadeOut都可以達到你想要的效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/149961.html

標籤：HTML(CSS)

上一篇：“對react技術堆疊有一定了解”是怎樣一個程度？？

下一篇：微信小程式蘋果端圖片顯示不全安卓端正常