CODEWITHSUNDEEP
javascriptjqueryhtmlcss
J.WCT
J.WCT

Reputation: 92

Jquery Animate + fadeInOut element

what i need is while animate move to top 0 , fadeIn is running , it's also when animate move out fadeOut is running too

anyone can help me to fix this ?

here is my code but not working :

code not working example 1 

$("#note").fadeIn(2000).animate({ top:"0" }).delay(4000).animate({ top:"-200" }).fadeOut(2000);

code not working example 2

$("#note").fadeIn(2000, function () 
    {
        $("#note").animate(top,"0px");
    }).delay(4000).fadeOut(2000, function () 
    {
        $("#note").animate(top,"-200px");
    })

here is the code that working

$("#note").animate({ top:"0" }).delay(4000).animate({ top:"-200" }); // this is working 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center" style="position:fixed; z-index:2; background-color:rgba(255,102,102,1); width:80%; max-width:400px; top:-200px;">
	<b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

if u guys can help me set the div note in center(width) of page it is better else i will use js to calculate then set it on the center

Upvotes: 2

Views: 101

Answers (2)

user7207170
user7207170

Reputation:

You need to use {queue: false} attribute while you try to fadeIn to have it run synchronously with the next chained function i.e animate() and set display:none to the #note div.

What does setting it to false does?

Instead of queuing the fadeIn, it removes it from the chain of the functions in the queue and runs it along with whichever function is at the top of the queue now i.e animate() in this example below.

To center the div note, since you have already set its position to fixed, you can just make use of left set to 50% and translate X axis to -50% as shown.

First alternative:

$("#note").fadeIn({queue: false, duration: 'slow'}).animate({ top: "0px",opacity:"1"}, 'slow').delay(1000).animate({ top: "-20px",opacity:"0"}, 'slow').fadeOut();
#note {
  position: fixed;
  z-index: 2;
  background-color: rgba(255, 102, 102, 1);
  width: 80%;
  max-width: 400px;
  display: none;
  transform:translateX(-50%);
  top:-20px;
  left:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center">
  <b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

The second alternative:

  • You don't need to set the display:none to your #note div.
  • Neither you have to make use of fadeIn or fadeOut functions, we make use of opacity and top to animate the content.
  • You have to set the initial opacity of #note div to '0'.

$("#note").animate({ top: "0px",opacity:"1" }, 'slow').delay(1000).animate({ top: "-30px",opacity:"0"}, 'slow');
#note {
  position: fixed;
  z-index: 2;
  background-color: rgba(255, 102, 102, 1);
  width: 80%;
  max-width: 400px;
  transform:translateX(-50%);
  top:-30px;
  left:50%;
  opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center">
  <b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

Third alternative: Without using Jquery at all but using animation in CSS

#note {
  position: fixed;
  z-index: 2;
  background-color: rgba(255, 102, 102, 1);
  width: 80%;
  max-width: 400px;
  transform:translateX(-50%);
  top:-30px;
  left:50%;
  opacity:0;
  animation: effect 4s linear forwards;
}

@keyframes effect {
    10%  {top:0px; opacity:1;}
    70%  {top:0px; opacity:1;}
    80% {top:-30px;opacity:0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="note" align="center">
  <b>
    <p id="txtnote" style="background-color:rgba(255,255,255,0.7); width:100%; line-height:40px; margin:0">hello</p>
  </b>
</div>

Upvotes: 2

Andrei Todorut
Andrei Todorut

Reputation: 4526

To center the box horizontally use this css snippet

#note {
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
}

working fiddle https://jsfiddle.net/7f49tqvr/

Upvotes: 0

Related Questions