CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
jQuerybeast
jQuerybeast

Reputation: 14490

jQuery Animate top (From bottom to top)

I am trying to animate a Div a top:275.

I tried .animate( {marginTop: -820 } but on each screen it ends up to a different position. . .

So I changed the marginTop to .animate( {top: 275} but the div comes from the top to down (slidedown). Note that, so I can use the animate:top I had to set the div to position:absolute during the animation. . .

Is there any hackyway to make the top come from the bottom up or make the marginTop have the same distance from the top on each screen resolution ? ( I assume margintop can't be solved since im setting margin top to -820 in order to get at a point of top:275, therefore screens smaller than 1200px height, the div will go much higher...)

Here is my code:

$("#features").fadeIn()
            .css({
                position: 'absolute'
            }).animate({
                top: '275'
            }, function() { //callback });

Upvotes: 14

Views: 99750

Answers (3)

Navin Solanki
Navin Solanki

Reputation: 36

$("#btn-auto-refresh").show()
  .css({
    'opacity': 0,
    'bottom': '-100px'
  })
  .animate({
    'opacity': '1',
    'bottom': '100px'
  }, 1000);
body{
min-height:1800px;
}
.auto-refresh-Div-position {
  display: flex;
  justify-content: center;
}

.btn-auto-refresh {
  border: none;
  color: white;
  padding: 5px;
  border-radius: 22px;
  width: 36%;
  z-index: 1;
  bottom:-100px;
position:fixed;
}

.bgblue {
  background-color: #37A6E1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="auto-refresh-Div-position">
  <button class="pf bgblue btn-auto-refresh " id="btn-auto-refresh" style="display:none"><i class="ico ico-spinner11"></i><span class="ml10">New Deals</span></button>
</div>

Upvotes: 0

Mani_k
Mani_k

Reputation: 63

$( '#features' ).show()
.css( {'opacity': 0, 'bottom': '-100px' } )
.animate( { 'opacity': '1', 'bottom' : 0 }, 1000 );

Upvotes: 0

jQuerybeast
jQuerybeast

Reputation: 14490

Ah Found it!!

$("#features").fadeIn()
.css({top:1000,position:'absolute'})
.animate({top:275}, 800, function() {
    //callback
});

So basically I've set the top from css at the very end to 1000, then animated it to 275 which is up...

Upvotes: 40

Related Questions