CODEWITHSUNDEEP
jqueryjquery-animate
Andy Rossiter
Andy Rossiter

Reputation: 23

jQuery animation margin issue

I'm creating an intro animation at the request of the client using jQuery. This code works in most browsers except IE8 and Safari (PC) where the divs jump to their final position instead of animate. I've been on this for a few days now: http://jsfiddle.net/evolve/5g2FQ/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
body, html {margin: 0;}
#navigation-next-top {background: red; position: absolute; width: 20px; height: 20px; top:   40px; right: 0; bottom: 0; left: 0; margin: auto;}
#navigation-next-right {background: orange; position: absolute; width: 20px; height: 20px; top: 0; right: 40px; bottom: 0; left: 0; margin: auto;}
#navigation-next-bottom {background: yellow; position: absolute; width: 20px; height: 20px; top: 0; right: 0; bottom: 40px; left: 0; margin: auto;}
#navigation-next-left {background: green; position: absolute; width: 20px; height: 20px; top: 0; right: 0; bottom: 0; left: 40px; margin: auto;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".logo").click(function(){
        $("#navigation-next-top").animate({"top": "40px", "marginTop": "0"}, 2000);
        $("#navigation-next-right").animate({"right": "40px", "marginRight": "0"}, 2000);
        $("#navigation-next-bottom").animate({"bottom": "40px", "marginBottom": "0"}, 2000);
        $("#navigation-next-left").animate({"left": "40px", "marginLeft": "0"}, 2000);
    });
});
</script>

</head>
<body>

<div id="navigation-next-top" class="logo"></div>
<div id="navigation-next-right" class="logo"></div>
<div id="navigation-next-bottom" class="logo"></div>
<div id="navigation-next-left" class="logo"></div>

</body>
</html>

I've tried many things and it appears if I change margin: auto; to something like 200px then the animation works fine, however margin: auto; is whats positioning my divs in the centre in the first place.

I've tried using % but this needs to be responsive and % gives alignment issues in some browsers.

Using jQuery 2 gives JS errors in IE8, so I've settled with 1.9.1.

I simply want this to animate from start to finish in all browsers.

Upvotes: 2

Views: 1368

Answers (1)

Hadi
Hadi

Reputation: 2905

Please use following markup -

css

* { margin:0; padding:0 } /* use css reset instead of using * */
html, body { height:100%; width:100% }
.box { width:20px; height:20px; position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-20px }

.top { background-color:#09C; margin-top:-40px }
.right { background-color:#C66; margin-left:0px  }
.bottom { background-color:#936; margin-top:0px  }
.left { background-color:#000; margin-left:-40px  }

HTML

<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>

JS

$(document).ready(function(){
    var timing = 2000;

    $('.box').click(function(){
        $('.top').animate({ top: '100%' }, timing); 
        $('.bottom').animate({ top: '20px' }, timing);
        $('.left').animate({ left: '100%' }, timing);
        $('.right').animate({ left: '20px' }, timing);  
    }); 
});

Please see this jsFiddle - http://jsfiddle.net/rsAGv/

Upvotes: 1

Related Questions