Question

我正在实施一个相当简单的倒计时小工具，一旦数字变化，数字会下降。但是，一旦数字向下动画，它就不会变为下一个值。打印出整个对象会显示dom相同，但打印出object.html（）会显示已更新的值。这是将代码简化为基本案例。

<div>
<p class="countdown">
    <span id="days"></span>d
    <span id="hours"></span>h
    <span id="minutes"></span>m
    <span id="seconds">10</span>s
</p>
</div>

使用javascript

$("#seconds")
                  .css('position','relative')
                  .animate(
                    {
                      opacity: 'hide',
                      top: 200
                    },
                    'slow',
                    function(){ 
                        //$(this).css({'opacity': 'show'});

                        $(this).html(9);
                        console.log($(this));
                        console.log($(this).html());
                    ;
                     });

相当简单吧？它应该只向下降10（它确实如此）并在动画完成时用9替换它。但是，动画完成后控制台输出以下内容时不会显示任何内容：

console.log($(this)) = <span id="seconds" style="position: relative; opacity: 1; top: 0px; ">10</span>


console.log($(this).html()) = 9

不知道为什么html（）值会随着DOM仍未受影响而改变。有任何想法吗？感谢。

Answer 1

这里的问题是animate函数隐藏了元素。因此，您需要显示它并重置位置。以下代码适用于我。

$("#seconds").css('position', 'relative').animate({
    opacity: 'hide',
    top: 200
}, 'slow', function() {
    $(this).html(9).css({top:0}).show();
});

http://jsfiddle.net/EVVPE/

Answer 2

理想情况下，它应按预期工作，您可以尝试使用text方法。

$(this).text(9);

.html（）在回调函数中调用时不更新dom？

2 个答案: