Jquery: Animate Margins to Auto

jQuery: Animate Margins to Auto?

As 'auto' isn't a number, jQuery cannot animate it.

If you are okay with taking the image out of the flow of the document, you can set position to absolute or fixed and try:

$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });

Animate element from margin:auto .

this is the jQuery version of what you want: DEMO

var centerMargin=($(window).width()/2)-($('div').width()/2)+'px';
$('div').css('margin-left',centerMargin);
var toggled=false;
$(".animate").click(function(){
    if(!toggled){
        $('div').animate({marginLeft:'0px'},1000);
        toggled=true;
        }
    else{
        $('div').animate({marginLeft:centerMargin},1000);
        toggled=false;
    }
});

jQuery animate margin top

You had MarginTop instead of marginTop

http://jsfiddle.net/kX7b6/1/

It is also very buggy if you leave mid animation, here is update:

http://jsfiddle.net/kX7b6/3/

Note I changed it to mouseenter and mouseleave because I don't think the intention was to cancel the animation when you hover over the red or green area.

Can't animate my div with margin left

First of all, your code was not running on JSFiddle because it requires a https request to external files.

Secondly, your CSS has a transition delay which was causing your animate function not to run correctly.

JSFiddle

$(document).ready(function() {    $('#twitter').animate({      marginLeft: "-=115px"    }, 5000);  });

#twitter {  width: 1000%;  padding: 95px 0 0 400px;  margin-left: 0px;  height: 220px;}
#next_tweet {  margin-left: 65px;  width: 50px;  height: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div id="twitter">  <img style="width:50px;height:50px;" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png"></div>

Animate using margin-right

Try this:

$('button').click(function () {
    $('.box').animate({
        "height": "40px",
            "width": "40px"
    }, 500, function () {
        $(this).animate({
            "margin-left": "200px",  //go right
        }, 1500, function () {
            $(this).animate({
                "margin-top": "200px", //go down
            }, 1500, function () {
                $(this).animate({ // <===problem starts here
                    "margin-left": "-=200px" //go left
                    //"marginRight": "200px"
                }, 1500, function () {
                    $(this).animate({
                        "margin-top": "-=200px" //go up
                    }, 1500, function () {
                        $(this).css("background", "black")
                    });
                });
            });
        });
    });
});

Fiddle here

How to replace margin-left animation with transform in Jquery animate() to fix laggy multislider

You can use animate with $(this) and .css() if you use step()

let test = "100";

$('div h2').animate({ pxNumber: test }, {
    step: function(pxNumber) {
      $(this).css('transform','translateX(-' + pxNumber + 'px )'); 
    },
    duration:'slow',
    easing: "swing",
    complete: function(){
      console.log('Animation done');
       // doneAnimating();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><h2>Move it</h2></div>

animate from the center to the left with jquery

Get the initial position of element using 'position' and re-use it before starting animation.

var x=$(this).position().left;
var y=$(this).position().top;
$(this).css({'position': 'absolute','top': y+'px','left': x+'px'})

jQuery animate left causes element to jump before moving in Fire Fox

The issue is seen as you have both Left and Right values set for the two elements.

Here is the updated code that avoids the jumping animation.
Updated JSFiddle Link

What essentially I have done is Added another Div wrapper which has the width of 200px and is aligned centrally with Margin as 0px auto. This gives the containing Divs a central position.

$(document).ready(function () {    $('.maincontent').click(function () {        $('.maincontent').stop().animate({            left: -1000        }, 1000);        $('.maincontent-right').stop().animate({            left: 0        }, 1000);    })});

.mainbody {position:relative; width:200px; margin:0 auto; text-align:center;}div.maincontent,div.maincontent-right {    text-align:left;    width: 200px;    height: 200px;    background-color:blue;    top: 20px;    position:absolute;    margin-left:auto;    margin-right:auto;    left:0px;}div.maincontent-right {    background-color:yellow;    left: 1000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><body>    <div class="mainbody">        <div class="maincontent-right">Welcome !</div>        <div class="maincontent">Goodbye !</div>    </div></body>

---

Related Topics