1

アニメーションが実行された後、テキストが非常に薄い不透明度でまだ表示されている場合、誰かがこれを削除するのを手伝ってくれませんか?

ここに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);
 });
});
4

2 に答える 2

1

animate の「完全な」コールバックを使用する必要があります

    $(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 );
            } );
        } );
    } );

私はこれをテストしませんでした

問題は、'animate' 関数が同時に実行されることである可能性がありますが、これは意味がありません。JavaScript はコールバックと非同期で動作します。

于 2013-04-05T11:31:09.857 に答える
0

私はあなたの問題を観察しましたが、それは目の錯覚であるという点でビリー・モートに同意する必要があります. ただし、ツールチップを改善する方法があります。現在、初めて表示された後は、実際には透明なままになります。これにより、 を使用してテキストを選択できます (ホバリングするとマウス カーソルが変化することに注意してください)。

これは、アニメーションの完了後に使用display:noneまたは非表示にすることで修正できます。visibility:hidden

jsフィドル

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;
}
于 2013-04-05T11:30:45.667 に答える