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>
