Adding a SetTimeout and transition to jQuery Show / Hide

Question

I am trying to add a SetTimeout and animation type transition to jQuery Show / Hide call. Below is how I currently have it but am wanting to add the a specific amount of time the 'show' div remains displayed before it reverts back to the orginal #bg_dv. I also want to add animated transitions between the effects if possible.

   function tilt(){
    $("#area1").click(function(){
        $("#bg_div").hide();
        $("#bg_skew").show(); // I would like to show this Div for about 5 seconds
 // and then have original back. 
       });
    }

Rickard Andersson · Accepted Answer · 2013-07-03 15:26:15Z

9

$("#bg_div").hide(0).delay(5000).show(0);
$("#bg_skew").show(0).delay(5000).hide(0);

If you want animations, you can replace the calls to hide() and show() with something appropriate. For example fadeIn() and fadeOut().

edited Jul 3, 2013 at 15:26

answered Jul 3, 2013 at 14:55

Rickard Andersson

5793 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

I don't believe this works. Without arguments, .show or .hide are not animation methods, hence .delay does not have any effect on them.

Rickard Andersson Over a year ago

You're absolutely right. I've updated my answer to include a duration which turns them into animation methods.

0x_Anakin · Accepted Answer · 2013-07-03 15:05:34Z

2

    $("#area1").click(function(){

        $("#bg_div").fadeOut('fast',function(){
             $("#bg_skew").delay(5000).fadeIn('fast');
        });


    });

In order to prevent caching of multiple clicks and have the animation play many times you should also take a look at

.stop(true,true)

before any animation.Also take a look at this animation option - property.

{cache:false}

edited Jul 3, 2013 at 15:05

answered Jul 3, 2013 at 14:59

0x_Anakin

3,2695 gold badges52 silver badges91 bronze badges

Comments

Amit Sharma · Accepted Answer · 2013-07-03 15:21:05Z

2

it's so simple. just put milliseconds in show.delay(5000) it will delay it for 5 seconds.

syntax:

$(selector).delay(speed)

speed: time in millsecnds e.g. 5000 for 5 seconds.

$(selector).show(speed,easing,callback)

speed: here put time in milliseconds like 1000 for 1 second.

easing: it defins speed of elements at different points i.e. "linear" "swing".

callback: here you can put your function it will execute after completing show method. For example when you will click button to show image after showing image it will exexcute funxtion e.g. .show(1000,function(){alert("hello")};);

Hope i helped you.

edited Jul 3, 2013 at 15:21

answered Jul 3, 2013 at 15:09

Amit Sharma

388 bronze badges

2 Comments

Felix Kling Over a year ago

It doesn't delay the execution. The duration of the animation will be 5 seconds.

Amit Sharma Over a year ago

ohh yes. sorry my mistake thanx

Collectives™ on Stack Overflow

Adding a SetTimeout and transition to jQuery Show / Hide

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related