简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 顯示與隱藏動畫有什麼好的方案嗎？
阿神
阿神 2017-06-30 09:59:55
0
5
960

例子

就像這個動畫一樣的效果，p先是隱藏的，點擊按鈕後顯示並且有動畫效果，隱藏的時候同樣。但我絕對我寫的太複雜，有沒有更簡單的方案呢（不要第三方函式庫）！

阿神
阿神

闭关修行中......

全部回覆(5)
漂亮男人
漂亮男人2017-06-30 10:01:55 5樓

試試用transition：
demo

點贊 +0
新增回覆
为情所困
为情所困2017-06-30 10:01:55 4樓

比較簡單的思路是：

  1. 方塊無需隱藏，只需要設定高度為0就看不見了

  2. 用transition實現動畫效果

  3. 不需要使用hidden和show兩個類別名稱來控制，其實它就只有兩種狀態，所以可以認為無show就是隱藏了

  4. 另外無需寫一個show()和hide()分開綁定，其實你這個按鈕點一下是展開，再點一下隱藏，用一個toggle()切換顯示狀態就可以了


🎜我在你的程式碼上做了點修改，如下：🎜https://jsfiddle.net/boxsnake...🎜
點贊 +0
新增回覆
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-30 10:01:55 3樓

雷雷

點贊 +0
新增回覆
習慣沉默
習慣沉默2017-06-30 10:01:55 2樓

題主可以配合CSS3解決（如果不需要相容IE的話）

點贊 +0
新增回覆
小葫芦
小葫芦2017-06-30 10:01:55 1樓

可以用jquery實現嗎？ 

//头部引入jquery,toggle()
<body>
    <p>bugbugbug</p>
    <button>Toggle</button>
    <script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function() {
            $("p").toggle(1000);
        });
    });
    </script>
</body>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！