How can I make a div slide in with a easeoutbounce 4 seconds after page is finished loading?

Question

$(document).ready(function() {
    $("#online_bestellen").hide();
    setTimeout(function(){
        $("#online_bestellen").show()
    }, 4000);
    $('#online_bestellen').animate({
        bottom: '-=100px'
    }, 1500, 'easeOutBounce');
});

The div called online_bestellen hides and 4 seconds it appears again but it doesn't slide in..

Who has a better option?

Apparantly I solved it myself! $(document).ready(function() { $("#online_bestellen").hide(); setTimeout(function(){$("#online_bestellen").show()},4000); $('#online_bestellen').delay(4000).animate({bottom: '-=100px'}, 1500, 'easeOutBounce'); }); — user3797701, Mar 30 '16 at 13:36
I noticed that you have set bottom: '-=100px', maybe it has to be bottom: '-100px' so without the =? — Dirk Jan, Mar 31 '16 at 06:16

score 0 · Answer 1 · answered Mar 30 '16 at 13:35

Its messy, but see if it works

$(document).ready(function() {
    $("#online_bestellen").hide("fast", function(){
        $("#online_bestellen").show("fast", function(){
            $('#online_bestellen').animate({
                bottom: '-100px'
            }, 1500, 'easeOutBounce');
        })
    });    
});

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

You could use jQuery slideup api.

Refer jQuery Easing with slideUp Easing Function

edited May 23 '17 at 12:07

Community

1
1

answered Mar 30 '16 at 13:46

Lohith

136
1
4

How can I make a div slide in with a easeoutbounce 4 seconds after page is finished loading?

2 Answers2