CODEWITHSUNDEEP
jqueryhtml
user2338925
user2338925

Reputation:

jquery slide on user click

I want to make div disappear after x seconds.With a simple piece of code,this div will slideDown( jQuery slideDown() method) when user clicks button.

$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
<div id ="flip">User click</div>
<div id = "panel">Contents</div>

I need this #flip to automatically disappear after x seconds.But of course,the #panel will remain.I'm new in jquery and I want to add some nice looks on my html.

Upvotes: 0

Views: 158

Answers (4)

user2338925
user2338925

Reputation:

Got it,just added som piece of code setTimeout as suggested by @rynolson

$(document).ready(function(){
setTimeout(function() { $("#flip").fadeOut(15000); }, 5000)
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});

Upvotes: 0

webkit
webkit

Reputation: 3369

You could simply do this using your code:

$("#panel").slideDown("slow").delay(1000).slideUp('slow');

If you want #flip to disappear, you can do this in the current html format:

$(this).next().slideDown("slow").end().delay(1500).slideUp('slow');

delay will be in milliseconds..

Upvotes: 3

user3024814
user3024814

Reputation: 246

You can call a callback function as the second parameter of the slideDown function. The code within this gets called after the animation is done. If you want to wait x seconds you can use setTimeout() function:

$("#flip").click(function(){
    $("#panel").slideDown("slow", function(){
        //setTimeout(function(){
            $('#flip').hide(); 
       // }, 5000);
    });    
});

Here is a working jsfiddle: http://jsfiddle.net/gfZM2/2/

Upvotes: 0

ry4nolson
ry4nolson

Reputation: 859

not sure if you want it to disappear after clicking or what?

you can use setTimout to run code after x milliseconds

setTimout(function() {
    $("#flip").hide(); // or .remove() if you want to get rid of it completely
}, 5000); //5000 milliseconds

you could put this inside of your click event handler to make this happen after clicking.

Upvotes: 1

Related Questions