Question

我无法动画从下到上动画的div。它在Firefox中运行良好但在Chrome中表现得很奇怪。我的猜测是，这与“顶级”动画而不是“底部”有关，但我不知道如何解决这个问题。

	$(document).ready(function(){

	$("#animate").click(function() {

$("#two").animate(

	{
		
		top: "100" 


	}, 1000);
    
    });

   });

html, body { height:100%; }

#container {
position: relative;
width:100%;
margin: 0 auto;
background: #ccc;
height: 100%;
clear:both;
}

#left {
position: relative;
width:25%;
max-width: 300px;
float:left;
height: 100%; 
background: blue;

}

#right {

width:50%;
max-width: 649px;
float:right;
height: 100%; 
background: red;

}

#one {
position: absolute;
width:100%;
height: 100px; 
background: black;
top:0;

}

#two {

width:100%;
height: 100px; 
background: green;
position: absolute;
bottom:0;



}

<div id="container">

	<div id="left">

		<div id="one">
	</div>

	<div id="two">
		<button id="animate">button</button>
	</div>

	</div>

	<div id="right">
	</div>

</div>

Answer 1

对于提供的html / css，明确定义底部的方向应该适用于Firefox和Chrome：

$(document).ready(function(){

    $("#animate").click(function() {

$("#two").animate(
    {
        bottom: "+=" + (parseInt($("#container").css("height"),10) - parseInt($("#one").css("height"),10) - parseInt($("#two").css("height"),10))
    }, 1000);

    });//animate

   });//Doc ready

对于您尝试完成的操作，这可能不是理想的解决方案，但如果使用容器的高度和从底部获取像素数量没有问题，它可能是一种解决方法。以上元素。

自下而上的JQuery动画在chrome中不起作用

1 个答案: