logo标签列表

为什么jquery的fadeIn()函数不能和.html()方法一起使用？

jqueryfadein
79

当你点击复选框时，我希望消息能缓慢淡入。

为什么在这个示例中.fadeIn()不起作用？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       
    </head>
<body>
    <div class="checkboxList">
        <div class="title">Languages:</div>
        <div class="row"><input class="checkbox" type="checkbox"/><span class="label">Ruby</span></div>
        <div class="row"><input type="checkbox"/><span class="label">PHP</span></div>
        <div class="row"><input type="checkbox"/><span class="label">C#</span></div>
        <div class="row"><input type="checkbox"/><span class="label">Python</span></div>
        <div class="row"><input type="checkbox"/><span class="label">JavaScript</span></div>
    </div>
    <p id="message"></p>
</body>
</html>

javascript:

：

JavaScript

google.load("jquery", "1.3.2");

//run when page is loaded
google.setOnLoadCallback(function() {

    $('.checkboxList .row').css('color','red');
    $('.checkboxList input').attr('checked', true);
    $('.checkboxList input').bind('click', function() {
        $('#message').html("You clicked on a checkbox.").fadeIn('slow');
    });

});
3个回答
233

因为 #message 元素是可见的，所以不需要 fadeIn。隐藏它，添加内容并淡入：

$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
1
太棒了。你今天是英雄。 - James P.
7
一个以人类形式存在的内容管理系统 - 太棒了！ - JoseBazBaz
如果我想在一秒钟后逐个添加多个 li 元素并使用您的解决方案进行显示，该怎么办？如何只淡入我添加的 li 元素而不是所有 li 元素？就像 $("#oFnav").append("<li class='hideOFl'>Business Process Study</li>").hide().fadeIn(fadeIndur); 一样。它会隐藏并淡入所有的 li 元素，而不仅仅是新添加的元素。 - RN Kushwaha
修改后的代码：$('#message').fadeOut('slow').html("您点击了一个复选框。").fadeIn('slow'); 会让淡入的 HTML 闪烁两次...有趣的 bug :P - Kerim Yagmurcu
11

分析了我要解决的问题后，这是我能用来实现淡出、改变HTML并淡入效果的代码。

$("#div_big_picture").fadeOut('slow',function(){
    $(this).html("<img src='" + str_to_load + "' height='800px' />")
}).fadeIn("slow");
2

不知道为什么以前连接这个代码时总是遇到问题。您可以使用这段不太优雅的代码来获得所需的效果：

google.load("jquery", "1.3.2");

//run when page is loaded
google.setOnLoadCallback(function() {

    $('.checkboxList .row').css('color','red');
    $('.checkboxList input').attr('checked', true);
    $('.checkboxList input').bind('click', function() {
        $('#message').hide(); //just in case
        $('#message').html("You clicked on a checkbox.");
        $('#message').fadeIn('slow');
    });

});
2
这感觉像巫术代码，你知道吗？就像，链接起来可以工作，但当你尝试时可能会错过某些东西，所以你退回到更危险的方法，因为它可以工作。这是一个很危险的习惯... - nickf
同意...从来没有花时间弄清楚为什么它不起作用...但我看到CMS的答案解释了这一点。好知道。 - beggs
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接