jquery - 当动画运行一次时，我仍然可以看到非常不透明的文本，有人可以帮忙删除它吗？

Question

当动画运行一次时，我仍然可以看到非常不透明的文本，有人可以帮忙删除它吗？

这是一个jsFiddle

$(document).ready(function () {
 $('.btn').click(function () {
     $('.tooltip').animate({
         opacity: 0,
     }, 0);
     $('.tooltip').animate({
         bottom: '40px',
         width: '163px',
         opacity: 1
     }, 400);
     $('.tooltip').css({
         'display': 'block',
     }).delay(1400);
     $('.tooltip').animate({
         opacity: 0,
         bottom: '30px'
     }, 200);
 });
});

Answer 1

您应该使用动画的“完整”回调

    $(document).ready(function () {
        $('.btn').click(function () {
            $( '.tooltip' ).css( 'opacity', 0 )
            .animate( {
                bottom: '40px',
                width: '163px',
                opacity: 1
            }, 400, function() {

                $( '.tooltip' ).css( 'display', 'block' )
                .delay( 1400 )
                .animate( {
                    opacity: 0,
                    bottom: '30px'
                }, 200 );
            } );
        } );
    } );

我没有测试这个

问题可能是“动画”函数将同时运行，这是没有意义的，JavaScript 与回调异步工作

Answer 2

虽然我确实观察到了你的问题，但我必须同意比利护城河的观点，因为这是一种视错觉。但是，有一种方法可以改进您的工具提示。目前，在第一次之后，它实际上会保持可见只是透明的。这允许您使用来选择文本（注意鼠标悬停时光标会发生变化）。

您可以通过使用display:none或visibility:hidden在动画完成后隐藏它来解决此问题。

jsFiddle

JS

 $(document).ready(function () {
     $('.btn').click(function () {
         $('.tooltip')
             .addClass('show')
             .animate({
                 opacity: 0,
             }, 0)
             .animate({
                 bottom: '40px',
                 width: '163px',
                 opacity: 1
             }, 400)
             .delay(1400);
         $('.tooltip')
             .animate({
                 opacity: 0,
                 bottom: '30px'
             }, 200);
         setTimeout(function () {
             $('.tooltip').removeClass('show');
         }, 2000);
     });
 });

CSS

.tooltip {
    visibility:hidden;
    width: 164px;
    left: 6px;
    display: block;
    height: 33px;
    position: absolute;
    bottom: 20px;
    background-image: url('http://www.rusterholz.dk/btn.png');
    background-repeat: no-repeat;
    background-position: top left;
}
.tooltip.show {
    visibility:visible;
}