Question

我正在为我的登录框做一个最小型验证响应。没有太多空间，所以我更改“登录”以说“无效登录。忘记密码？”在一个漂亮的褪色动画。当我在“登录”之前插入“无效”而不是在整个范围内淡出时，我之前就已经工作了。

当涉及到我的代码时，前一个跨度不会消失，后一个跨度只会显示在下面，就好像我在做.show（）。此外，不会发生任何褪色，这很奇怪。

这是我的标记：

<span id="oldLoginProblem"><h3>Login</h3></span>
<span id="newLoginProblem" style="color: red; font-weight: bold;"><h3>Invalid Login &#183; <a href='recover'>Forgot Password?</a></h3></span>

这是jQuery（运行验证错误）：

if(data == "Invalid")
            {
                $('#oldLoginProblem').fadeOut('slow', function(){
                    $('#newLoginProblem').fadeOut('slow', function(){
                        $('#newLoginProblem').fadeIn('slow');
                    });
                });
            }

任何帮助？

Answer 1

如其他答案所述，内联元素（h3中的span）不能包含块元素。

如果您将范围更改为inline-block，它会有效，但我不知道这是否会对您的布局产生其他影响。

span {
     display: inline-block;  
}

Answer 2

您的褪色问题可能是因为span是内嵌元素：

http://jsfiddle.net/proudlygeek/AUC5v/

更新

这是一个包含您想要的淡化效果的片段：

$('#loginProblem').fadeOut('slow', function() {
    $(this).html("<h3>Invalid Login &#183; <a href='recover'>Forgot Password?</a></h3>");
    $(this).css({
        'color': 'red',
        'font-weight': 'bold'
    });
    $(this).fadeIn('slow');
});

在jsFiddle

上查看

Answer 3

在.fadeOut()内调用<h3/>并使用<span/>元素似乎存在问题（这是无效的标记，因为您无法在内联元素中包含块级元素）

话虽如此，您可以使用fadeOut()

让.children()效果有效

$('#oldLoginProblem').children().fadeOut('slow', function() {
    $('#newLoginProblem').children().fadeOut('slow', function() {
        $('#newLoginProblem').children().fadeIn('slow');
    });
});

<强> Code Example on jsfiddle

另一种选择是简单地将标记调整为有效，并且fadeOut将正常工作。

<h3 id="oldLoginProblem"><span>Login</span></h3>
<h3 id="newLoginProblem"><span  style="color: red; font-weight: bold;">Invalid Login &#183; <a href='recover'>Forgot Password?</a></span></h3>

<强> Code Example on jsfiddle

jQuery褪色问题

3 个答案:

更新