css中的jQuery淡入淡出效果答案

【问题标题】：jQuery fadein fadeout effects in csscss中的jQuery淡入淡出效果
【发布时间】：2015-09-20 12:51:26
【问题描述】：

我正在使用 Cordova 制作一个应用程序，它使用 jQuery 效果，即淡入和淡出。在我的安卓设备上效果非常慢。我想过将它们转换为 CSS，我看到了使用 toggleClass 等的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function($) {
            $( "#fade" ).click(function() {
                $('#fader').toggleClass('fadeout');
            });
            $('#fader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                $('#fader').toggleClass('hide');
            });
            setTimeout(500)
        });
    </script>
    <style>
        div{
            background-color: blue;
        }
        #fader{
            display: block;
            opacity: 1;
            -webkit-transition: opacity 0.35s linear;
            -moz-transition: opacity 0.35s linear;
            -ms-transition: opacity 0.35s linear;
            -o-transition: opacity 0.35s linear;
            transition: opacity 0.35s linear;
        }
        #fader.fadeout{
            opacity: 0;
        }
        #fader.fadeout.hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="fader">
        css
    </div>
    <br>
    <br>
    <div id="fade">
        DivButton
    </div>
</body>
</html>

但是我遇到了两个问题：

问题 1

在使用 jQuery 淡入淡出时，最后它会将 display 设置为 none。同样，在使用淡出时，它会删除 display:none 属性。动画也很突然。如何在 CSS 中做到这一点？

问题 2

我想在 CSS 中与淡入和淡出一起使用延迟功能。我怎样才能做到这一点？

请大家帮忙。

提前致谢。

【问题讨论】：

如果您能提供代码或 JSFiddle 示例会很好。无论如何，您可以使用类切换来做到这一点，该切换使用 opacity 淡化元素，您可以设置延迟和转换时间在 css transition 属性中。至于display:none，它不能被“动画化”并且有它会产生奇怪的结果，试试visibility:none
我已经看过那些使用toggleClass的例子。但是没有可见性。还有..我不知道如何玩能见度
好的，请分享代码或演示，以便我们更好地查看

标签： jquery html css cordova

【解决方案1】：

display:none; 会突然移除方块，因此您可能还想为高度设置动画。

以下是 CSS 过渡的示例：

$(function() {
    $(".toggle-fade").click(function() {
        $(".block").toggleClass('hidden');
    });
});

.block {
    background:red;
    height:300px;
    width:300px;
    visibility:visible;
    opacity:1;
    transition:2s;
    -webkit-transition:2s;
    transition-delay:1s;
    -webkit-transition-delay:1s;
}
.block.hidden {
    visibility:hidden;
    height:0px;
    opacity:0;
    overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
    
</div>
<button class="toggle-fade">Toggle block</button>

Fiddle version

【讨论】：

@Johann 是的，你可以。但是，我还为 CSS 本身添加了延迟。您希望延迟发生在什么时候？如果需要，可以在此处添加：$(".block").delay(1000).toggleClass('hidden')