css中的jQuery fadein fadeout效果
我正在使用Cordova制作一个应用程序，它使用jQuery效果，即fadein和fadeout。在我的android设备上效果非常慢。我想把它们转换成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 fadein时，它最终将display设置为none。类似地，在使用fadeout时，它会删除display：none属性。动画也是突兀的。如何在CSS中做到这一点？
问题2
我想在CSS中使用延迟函数和fadein和fadeout。我怎样才能做到呢？
请帮帮伙计们。
提前道谢。
共有1个答案
display:none；会突然删除该块，因此您可能还需要对高度进行动画化。
下面是CSS过渡的一个示例：
null
$(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>-
问题内容： 这个div 比这上面显示的 当我在第一个div中分配z-index：98时，一切都很好！如果需要，我可以提供更多代码。 问题答案： z-index面向其父级-它们都在同一个父级元素中吗？z-index实现了自己的堆栈-例如： 框D，E和F是框C的后代->框F（z-index：-1）覆盖框B（z-index：1），因为它是框c的后裔（此框与z-索引：3，超出框b）
-
中间的有突出效果是怎么实现的啊CSS
-
请问，图中效果如何实现？感谢 /
-
主要内容：1. transition-property,2. transition-duration,3. transition-timing-function,4. transition-delay,5. transition通常当 CSS 的属性值更改后，浏览器会立即更新相应的样式，例如当鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。在 CSS3 中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借
-
我们有许多 CSS （库）可用于 HTML 页面，就像我们使用普通按钮一样。 我们已经展示了 Web 开发人员经常使用的按钮的一些 CSS 库。 本教程将介绍如何在实践中使用这些CSS库。
-
问题内容： 有没有办法在不使用JavaScript的情况下延迟：Hover事件？我知道有一种方法可以延迟动画，但是在延迟：hover事件上我什么都没看到。 我正在建立菜单之类的-鱼。我想模拟hoverIntent的作用，而不增加额外的JS重量。我更喜欢将其视为渐进式增强，而不是将JS作为使用菜单的要求。 菜单标记示例： 问题答案： 如果效果是基于CSS的，则可以使用过渡来延迟所需的效果。 例如 这