Question

当我检查下面的这段代码如何影响我的html直播时，我发现span#error已逐渐淡出并逐渐消失display: block，但后来改为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的淡入淡出方法默认自动设置元素具有的显示类型。

如果您要将其设置为其他内容，请在淡入淡出完成后执行此操作，或使用未设置显示属性的方法，例如fadeTo或animate() < / p>

$(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>

FIDDLE

Answer 2

这是因为fadeIn - 方法在淡入后设置显示变量。使用complete方法的fadeIn回调来设置显示 -experty span 到块。

Answer 3

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

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

$(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我只会使用.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/

JQuery.css（“display”，“block”）仍然以内联方式结束

4 个答案: