Question

什么是更简单的方法来调用页面上的所有内容，并告诉它同时淡出所有内容。这就是我想出来的，但它变得非常冗长

var $from1 = {opacity: 0};
var $to1 = {opacity: 1};

$('.navbar').css($from1).animate($to1, 2000);

var $from2 = {opacity: 0};
var $to2 = {opacity: 1};

$('.brand h1').css($from2).animate($to2, 2000);

var $from3 = {opacity: 0};
var $to3 = {opacity: 1};

$('.bgimage').css($from3).animate($to3, 2000);

var $from4 = {opacity: 0};
var $to4 = {opacity: 1};

$('.bgimage-media').css($from4).animate($to4, 2000);

var $from5 = {opacity: 0};
var $to5 = {opacity: 1};

$('.bgimage-contact').css($from5).animate($to5, 2000);

Answer 1

尝试使用css3转换。将所需的过渡效果提供给类，并将该类添加到元素中。一旦添加了类，所有动画都将顺利进行，而无需使用任何javascript。

或者您可以使用css3的关键帧动画

Answer 2

避免使用JavaScript制作可以轻松使用CSS的内容，如果您当然需要使用Javascript，请将所有Transitions添加到CSS类并使用JavaScript添加或删除该类，使用真正少的内存，你可以在类中使用Transition，你只需要一个动画+一个fadein，你可以将它放在一个CSS中并将该类添加到所有想要被淡化的选择器中：这是简单的例子我的意思是来自W3Schools，尝试使用它来获得概念，这将使用更少的内存来做你正在做的事情并使用GPU，所以让事情更快+更好的性能：

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

fadeIn（）或其他.animate（）更简单的jQuery函数

2 个答案: