如何使用jQuery动画更改文本值？

Question

发生了什么

我想要什么

我希望fadeIn的数字为300ms，而不是突然转换。因此，当我点击一个数字时，它会在#Demo-Card上淡入视图，如果我点击另一个数字，它就会淡入视图。我一直试图使用animate()，但无济于事。

如果有人能帮助我，我们将不胜感激！

我的代码

HTML 的

<div id="Demo-Pane" class="container">
                <div id="Demo-Card">
                    <div class="problem-header">
                        <h3><span class="problem-number">11</span> <span class="problem-equation">Problem</span></h3>
                    </div>
                     ...
                </div>
            </div>

的jQuery

$(document).ready(function () {
...
    $(".nav-pills").children("li").click(function(){
        ...
        /*Change problem number on #Demo-Card*/
        newProblemNumber = $(this).children("a").text();
        $("#Demo-Card").children(".problem-header").find(".problem-number").text(newProblemNumber);
    });
});

JSFiddle

注意

我的问题不是重复，因为与该问题不同，我只想更改文本的值，然后将其淡入。此外，我不想使用fadeIn或fadeOut，正如@DaniP所说，因为我不想移动问题文本。

Answer 1

您可以使用callback function()以此方式设置动画：

  

将不透明度设置为0 - 完成后更改文字并再次设置为1

$("#Demo-Card").children(".problem-header").find(".problem-number").animate(
    {opacity:0},200,function(){
       $(this).text(newProblemNumber).animate({'opacity':1})
    });
});

Updated Fiddle

Answer 2

您可以使用.fadeout()然后.fadein()

＆＃13;

＆＃13;

$(document).ready(function () {
     $("button").click(function(){
        newProblemNumber =23;
        $("#Demo-Card").children(".problem-header")
        .find(".problem-number")
        .text(newProblemNumber)
        .fadeOut(150).fadeIn(150);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Demo-Pane" class="container">
                <div id="Demo-Card">
                    <div class="problem-header">
                        <h3><span class="problem-number">11</span> <span class="problem-equation">Problem</span></h3>
                    </div>
                   
                </div>
            </div>

<button>click here</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

$("#Demo-Card").children(".problem-header").find(".problem-number").hide().html(newProblemNumber).show('slow');

希望它有所帮助！