Hi all I am testing a msn-look-a-like message box. So, when a message to a user is needed, the message-box shows up and disapears like a msn-message. The first time it works very well! But.....starting it for a next time, there is no animation, the messagebox comes up right away, while after a few seconds it does disappears the msn-way!
So my question is, what am i doing wrong?? I have tried several solutions (see code below) but none of them solves my problem! Thanks in advance for any hints! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $("#go1").click(function(){ // showing up textblock (animated msn-look) $("#block1").animate( { height:"200px" }, { queue:true, duration: 3000 } ) // waiting time: .animate( { borderLeftWidth:"1px"},3000 ) // disapearing textblock (animated msn-look) .slideUp(1000); // reset something, else next time showing up isn't animated, // while disappearing the msn-way still does?? //$this.css( { height:"0px" } ); // does not solve the problem //$this.css( { height:"0px"},5000 ); // does not solve the problem //.hide("5000") // does not solve the problem //.animate( { height:"0px"},5000 ) // does not solve the problem // new approach: // does not solve the problem //.slideUp("3000", function () { //$this.css( {height:"0px"}); }); // this does not solve the problem too: //$("#block1").css( {height:"0px"}); }); </script> <style>div { position: absolute; display:none; background-color:#bca; width:200px; height:1.1em; text-align:center; border:2px solid red; margin:3px; font-size:14px; right: 0px; bottom:0px } button { font-size:10px; } </style> </head> <body> <button id="go1">Show message msn-look</button> <div id="block1">msn-look msg...</div> </body> </html>