CODEWITHSUNDEEP
jqueryhtmlcss
user2243885
user2243885

Reputation: 73

When the animation has run once I can still see the text in a very light opacity, could someone please help remove this?

When the animation has run once I can still see the text in a very light opacity, could someone please help remove this?

Here is a 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);
 });
});

Upvotes: 1

Views: 52

Answers (2)

Torben
Torben

Reputation: 193

You should use the "complete"-callback of 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 );
            } );
        } );
    } );

I didn't test this

The problem may be that the 'animate'-functions will run at the same time which makes no sense, JavaScript works asynchronously with callbacks

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50189

While I did observe your problem, I have to agree with Billy Moat in that it's an optical illusion. However there is a way that you can improve upon your tooltip. Currently after the first time it will actually stay visible just transparent. This allows you use to select the text (notice the mouse cursor change when hovering).

You can fix this by with using display:none or visibility:hidden to hide it after the animation is completed.

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;
}

Upvotes: 0

Related Questions