JQuery.css（“ display”，“ block”）仍以内联结尾

Question

当我检查下面的这段代码如何影响我的html live时，我发现span#error在display: block处淡出并淡入，但在display: inline后立即更改为display: inline 。

如何防止这种情况发生？

jQuery的

$(function() {
    $("#credentials .wrapper button").click(function() {
        $("span#error").fadeOut(300);
        $("span#error").html('<b style="color: #ce1919;">(!)</b> TEST').fadeIn(300).css("display", "block");
    });
});

的jsfiddle

Answer 1

jQuery的衰落方法自动设置元素默认具有的显示类型。

如果要将其设置为其他内容，请在淡入淡出之后进行，或者使用未设置display属性的方法，例如fadeTo或animate()

$(function() {
    $("#credentials .wrapper button").click(function() {
        $("#error").fadeOut(300, function() {
            $(this).html('<b style="color: #ce1919;">(!)</b> TEST')
                   .fadeIn(300, function() {
                       $(this).css("display", "block");
            });
        });
    });
});

真正的答案是只使用一个块元素

<div id='error'>Error</div>

小提琴

Answer 2

发生这种情况是因为fadeIn -method淡入后设置了显示变量。请使用fadeIn -method的complete回调将span的display- fadeIn设置为block 。

Answer 3

使用淡入时，该元素将显示为其原始状态。 由于您的原始状态为none ，因此jQuery将选择该元素的默认显示值，在本例中为inline 。

在CSS中，如果将display值更改为block并隐藏DOM ready句柄中的元素，则一切工作正常：

$(function() {
    document.getElementById('error').style.display = 'none';
    $("button").click(function() {
        $("span#error").fadeOut(300);
        $("span#error").html('<b style="color: #ce1919;">(!)</b> TEST').fadeIn(300).css("display", "block");
    });
});

http://jsfiddle.net/yfC2B/2/

---

我知道使用块元素会更好，我只是在说为什么它当前不起作用。

Answer 4

我什fadeIn都不会使用fadeIn ，而只会使用.animate() ，因为fadeIn的文档说它只是对opacity属性设置了动画，以防止jQuery完全与display属性混淆：

$(function() {
    $("button").click(function() {
        $("span#error").fadeOut(300).stop();
        $("span#error").stop().html('<b style="color: #ce1919;">(!)</b> TEST').css({'opacity':'0','display':'block'}).animate({opacity:1},1000,function(){});
    });
});

http://jsfiddle.net/yfC2B/3/