Совсем простой js код движения элемента вправо, ie9 его же совершенно игнорирует. Менял разные версии Jquery, не помогло. В чем проблема? Буду очень благодарен за помощь.
Javascript:
$(function(){
$('#link-1').click(function(e){
e.preventDefault();
$('#div-1').animate({ left: '25%' });
});
});
Html:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="general">
<div id="div-1"></div>
<a href="#" id="link-1">Двигать</a>
</div>
</body>
Полный код
HTML:
<section class="general">
<header>
<div class="1" id="div-1"></div>
<div class="2"></div>
</header>
<a href="#" id="link-1"><div class="button">Action</div></a>
CSS:
.general {
width: 980px;
margin: 0 auto;
overflow:hidden;
position: relative;
}
.general header {
height: 360px;
}
.1 {
position: absolute;
width: 353px;
height: 220px;
background-image: url(../img/orange_back.png);
z-index: 1;
margin-top: 7%;
margin-left: -1%;
}
.2 {
position: absolute;
width: 646px;
height: 374px;
background-image: url(../img/orange_front.png);
z-index: 100;
margin-left: 6%;
margin-top: 2%;
}
div.button {
position: relative;
font-family: Arial;
font-weight: bold;
color: rgb(224,224,224);
width: 135px;
height: 18px;
padding: 5px;
text-align: center;
border: 1px solid #0d0d0d;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
cursor: pointer;
background: rgb(40,40,40);
z-index: 200;
}
Простой