Question

我正试图从0.5不透明度淡入1.0不透明度。但它不起作用。

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeIn(400);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

但是从0.5不透明度渐渐变为0可以起作用：

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeOut(400);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

为什么？

Answer 1

这对我来说似乎是个错误;与您尝试fadeIn已经可见的元素这一事实有关 - fadeIn认为不透明度为0.5的元素是可见的，因为它会检查display属性（在这种情况下，它是block，而不是none），而不是opacity。如果

fadeOut还会检查display属性。由于它不是none，fadeOut认为此元素是可见的（此元素具有的不透明度无关紧要）。所以fadeOut在这种情况下确实有用。

要达到您想要的效果，请尝试改为使用fadeTo：

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeTo(400,1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

Answer 2

JQuery的fadeIn()和fadeOut()不会使用数值更改不透明度...而是使用动画关键字：

阅读uncompressed latest JQuery script：

jQuery.each({
    slideDown: genFx("show"),
    slideUp: genFx("hide"),
    slideToggle: genFx("toggle"),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" },
    fadeToggle: { opacity: "toggle" }
}

它在animate()方法中使用关键字显示和隐藏，该方法在应用效果之前检查元素的状态...因为您的元素是已经可见，显示动画将无效...

但是，当使用fadeOut()时，隐藏关键字会产生效果，因为该元素尚未隐藏。

Answer 3

似乎淡出了＆amp; fadeOut只能处理显示属性。除了fadeTo之外的另一个选择是为不透明度设置动画。

＆＃13;

$(document).ready(function(){
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.animate({opacity:1},1000)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

＆＃13;

Answer 4

这是因为您的元素已经可见，因此fadeIn没有达到目的。您可以在css中设置display: none以将元素设置为隐藏，以便它可以淡入。

FIDDLE

Answer 5

您应该在示例中添加display：none

$(document).ready(function(){

    setTimeout(function(){
        var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeIn(2500);
    },1000)
})

.box {opacity:0;display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

为什么fadeIn不起作用？

5 个答案: