I have a problem when I'm using jQuery's(jQuery1.9.1) animate method. Here is my code in jsfiddle: http://jsfiddle.net/AySas/3/ I want to make the div wider using the relative percentage, ie:
html:
<div id="h_divCenter">
<div id="h_divIETodos" >
<div id="h_divIIEodoList" class="quadContent">
<ul id="h_ulIETodoList">
<li>itemC 3</li>
</ul>
</div>
</div>
css:
#h_divCenter {
position:absolute;
top:0;
left:20px;
right:100px;
bottom:0;
margin: 5px;
background: #0FF;
}
.quadContent {
position: absolute;
top: 41px;
bottom: 2px;
padding: 1px 1% 2px 1%;
width: 98%;
}
#h_ulIETodoList,#h_ulIUTodoList,#h_ulUETodoList,#h_ulUUTodoList {
width: 100%;
height: 100%;
list-style-type: none;
overflow: auto;
}
#h_divIETodos {
position: absolute;
margin: 2px;
top: 0;
left: 0;
right: 50%;
bottom: 50%;
color: #DE3C3C;
border: 1px solid #DE3C3C;
-webkit-box-shadow: 0px 0px 10px #DE3C3C;
-moz-box-shadow: 0px 0px 10px #DE3C3C;
box-shadow: 0px 0px 10px #DE3C3C;
}
javascript:
$('#btnTest').on("click", function(){
$("#h_divIETodos").animate({
right: "+=20%"
},500);
});
And this div has a absolute position and I have set the top,right,bottom,left properties of css. It works fine in chrome. But in firefox, you can see the right edge of the div cannot move by "20%". Has someone else encountered with the similar problem before? I really appreciate your help. Many thanks!
You can work with calculated pixels instead. Works as expected.
$('#btnTest').on("click", function(){
$("#h_divIETodos").animate({
right: "+=" + ($(this).parent().width() * 0.2) + "px"
},500);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.