Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 5 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

JQuery fading a div after a certain time

Using the setTimeout method to fade a div out after a certain amount of time

AshleyAshley

Here’s a handy bit of code that I use quite regularly, it’s particularly useful if you’re getting a response message from a form to notify the user that was data sent, or communicate an error and you want to fade the message out after a set time.

Firstly you need to include the jQuery framework you can download the latest version here.

All you need to change is the target div, in our case ‘mydiv’


$(document).ready(function(){
setTimeout(function(){
$("div.mydiv").fadeOut("slow", function () {
$("div.mydiv").remove();
});

}, 2000);
});

To adjust the amount of time until the fade function is triggered simply change the ‘2000’ to a different number, currently set at 2 seconds or 2000 milliseconds.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 21
  • Hasín
    Posted on

    Hasín Hasín

    Reply Author

    Thanks for this trick! it really helped me :-) I didn’t know how to use fadeOut for a specific div! you saved my time!


  • pallav
    Posted on

    pallav pallav

    Reply Author

    demo is showing error man! what the hell


  • j
    Posted on

    j j

    Reply Author

    can you please tell me how to show only an error message and dissapear after some time. what plugins should we use……..
    please help me out :(


  • vivek
    Posted on

    vivek vivek

    Reply Author

    Hey… it’s working great… thanks a lot…


  • M
    Posted on

    M M

    Reply Author

    thank you!


  • ancajasjp
    Posted on

    ancajasjp ancajasjp

    Reply Author

    really is a good jquery script useful for an action not redirecting to other page just to show success or error, great !


  • Artbeard
    Posted on

    Artbeard Artbeard

    Reply Author

    So few lines of code and yet so powerful, perfect!


  • Eric
    Posted on

    Eric Eric

    Reply Author

    Nice job with this. I’m using this and it works fine by itself, but when I add in the Jquery date picker (in a separate div altogether) it no longer fades and disappears. The date picker will work fine but not the div specified in this script.


  • Chris
    Posted on

    Chris Chris

    Reply Author

    Is there anyway you can do this this multiple divs sequentially?
    EG:

    Content
    Content
    Content
    Content
    Content


  • diego
    Posted on

    diego diego

    Reply Author

    Hey that was great, very useful, thanks from Argentina… :)


  • J
    Posted on

    J J

    Reply Author

    Thank you worked without having to install any plugin!


  • james
    Posted on

    james james

    Reply Author

    This is great, thanks!!!

    Question, in your demo it appears the div below the fade div jumps up after the fadeout – is there a way to make the div below slide up smoothly?


  • Steven
    Posted on

    Steven Steven

    Reply Author

    I was looking for a fade in and fade out tutorial and this is the real deal.


  • chestaz
    Posted on

    chestaz chestaz

    Reply Author

    thank Ashley ! im looking this thing for many time.. at the end your article save my day :)


  • Kevin Rinker
    Posted on

    Kevin Rinker Kevin Rinker

    Reply Author

    this is awesome. what if i want somthing to show after a time period?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Kevin you just need to change fadeOut to fadeIn and remove this line $(“div.mydiv”).remove(); your div element will then fade in. :)


  • mark
    Posted on

    mark mark

    Reply Author

    Excellent job!

    EXACTLY what i needed.


  • Karl
    Posted on

    Karl Karl

    Reply Author

    Great tip, been looking for something like this for a long, long time.

    Good work :)


  • Marcus Andersson
    Posted on

    Marcus Andersson Marcus Andersson

    Reply Author

    Nice piece of information to get me started! Think it’ll come in handy when confirming, for example, a save when using AJAX.


  • Joshua (Triscal)
    Posted on

    Joshua (Triscal) Joshua (Triscal)

    Reply Author

    Hey cool this is like a behind the scenes of DDC lol I if I needed this I sure would use it lol