CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Ricardo Melo
Ricardo Melo

Reputation: 469

overflow:hidden doesn't work on .animate() to the left, but works to the right?

I have been reading around and couldn't figure out what is wrong with this animation.

I am trying to do a transition and slide the old content of the page to the side before I load the new content.

I am using the current code:

$('#clickbutton').click(function(e) {
    $('#loader').css('overflow','hidden');
    $('#loader').animate({left: "100vw"},600, function(){
        $('#loader').empty();
        $('#loader').css("left", "0vw");
        $('#loader').css('overflow','auto');
        $('#loader').load('../viewers/docentes/docentes.lista.php');
    });
  });

the loader is a container, child of body, its position is relative, body has no css changes apart from default.

The strange thing is, if i change {left: "100vw"} to {left: "-100vw"} the container animation shifts direction to the right instead, and the scrollbar does not appear.

Why is it not working as well going to the left?

Upvotes: 0

Views: 65

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You can't animate the left CSS propertie of a non-positioned element.

But you can achieve what you want using the margin-left propertie.
A negative margin-left will push the element to the left.

$('#clickbutton').click(function(e) {
    $('#loader').css('overflow','hidden');
    $('#loader').animate({"margin-left": "-100vw"},600, function(){
        $('#loader').empty();
        $('#loader').css("margin-left", "0vw");
        $('#loader').css('overflow','auto');
        //$('#loader').load('../viewers/docentes/docentes.lista.php');
        $('#loader').html("New text is here!");
    });
  });
#loader{
    border:1px solid black;
    width:400px;
    height:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="clickbutton"value="Click me">
<br>
<br>
<div id="loader">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta lorem quis gravida tempus. Fusce scelerisque vehicula ornare. Phasellus dapibus cursus augue, et accumsan lorem ultricies et. Aenean suscipit placerat nisl, congue elementum ligula porta ut. Duis lacinia lacinia augue, eu mattis lacus blandit eget. Quisque accumsan ante vitae porta interdum. Aliquam maximus ut est sed luctus. Sed sed orci in urna feugiat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non neque arcu. Nam cursus ultrices leo non egestas. Vivamus id nisi auctor, tempus urna eu, interdum risus. Nulla urna purus, porta et scelerisque at, pellentesque a erat.
</div>

Upvotes: 1

Related Questions