通過 jquery 添加 class 時，CSS 轉換不起作用

Question

我正在添加一個 class 以在鼠標懸停在 div 上時顯示圖像，但過渡根本不起作用。 我正在使用不透明度，我知道 visibily: hidden 是不可動畫的。

代碼在片段中：

 $(document).ready(function() { $("#trigger").on("mouseenter", function () { $("#imgPuffo").addClass("visible"); $("#trigger").on("mouseout", function () { $("#imgPuffo").removeClass("visible"); }); }); });

 #trigger { height: 100px; width: 100px; background: red; } img { opacity: 0; animation: opacity 2s; }.visible { visibility: visible; opacity: 1; animation: opacity 2s; }.imgPuffo { height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trigger"></div> <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

Answer 1

如果您想使用動畫，請查看文檔。 您需要使用@keyframes

 $(document).ready(function() { $("#trigger").on("mouseenter", function () { $("#imgPuffo").addClass("visible"); $("#trigger").on("mouseout", function () { $("#imgPuffo").removeClass("visible"); }); }); });

 #trigger { height: 100px; width: 100px; background: red; } img { opacity: 0; animation: opacity 2s; }.visible { visibility: visible; opacity: 1; transition: opacity 2s ease-in-out; }.imgPuffo { height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trigger"></div> <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

Answer 2

使用 animation 時有些混亂，但 animation 會尋找一個@keyframes 序列來告訴它要運行什么 animation。 事實上，在這種情況下，我們似乎不需要完整的 CSS animation ，只需要 CSS 轉換。

我添加了transition: all 2s以防你將來想要轉換其他任何東西，比如比例，但如果你只想堅持轉換不透明度，你可以做transition: opacity 2s代替。

 $(document).ready(function() { $("#trigger").on("mouseenter", function () { $("#imgPuffo").addClass("visible"); $("#trigger").on("mouseout", function () { $("#imgPuffo").removeClass("visible"); }); }); });

 #trigger { height: 100px; width: 100px; background: red; } img { opacity: 0; /* animation: opacity 2s; */ transition: all 2s; }.visible { visibility: visible; opacity: 1; /* animation: opacity 2s; */ }.imgPuffo { height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trigger"></div> <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

Answer 3

使用:hover的 css 的解決方案怎么樣，沒有 jquery？

 #trigger { height: 100px; width: 100px; background: red; } #trigger:hover +.imgPuffo { opacity: 1; }.imgPuffo { opacity: 0; height: 200px; transition: opacity 2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trigger"></div> <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">