Question

我试图让一些文字出现并做动画，然后淡出。我得到了那部分工作，但我希望它是可重复的，而不必等待动画完成。例如，我在我的代码中通过单击按钮来测试它，并且我希望文本在每次按下按钮时都执行动画而不等待动画完成。当它完成后，我应该在屏幕上多次动画文本。请记住，我不想打断当前的动画。

代码：

<p id="test" hidden="true">Test</p>
<button id="random">Random</button>



$(function() {
$('#random').click(function(){
    minusHealth();
});

function minusHealth() {
var health = parseInt($('#health').text());

        health = isNaN(health) ? 0 : health - 1;
        $("#test").removeAttr("hidden");
        $("#test").animate({top:'250px'}, 900);
        $("#test").fadeOut(400);

    $('#health').text(health);

}
});

Answer 1

尝试用.fadeToggle()代替.fadeOut()

＆＃13;

$(function() {
$('#random').click(function(){
    minusHealth();
});

function minusHealth() {
var health = parseInt($('#health').text());

        health = isNaN(health) ? 0 : health - 1;
        $("#test").removeAttr("hidden");
        $("#test").animate({top:'250px'}, 900);
        $("#test").fadeToggle(400);

    $('#health').text(health);

}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="test" hidden="true">Test</p>
<button id="random">Random</button>

＆＃13;

如何反复动画文本而无需等待？

1 个答案: