我正在使用JQuery UI进行动画制作.
我有一个图标,我想在div的边缘伸出,所以我使用负边距.
动画调整div的大小并更改背景颜色.
但是,当我为div设置动画时,div之外的图像区域(在neg margin中)会在动画持续时间内消失.
我调查了它,看来问题来自div的调整大小,而不是颜色变化或边际变化.例如.这取决于动画CSS宽度属性.
我也试过改变相关的CSS属性.例如,固定图像的宽度,设置display:block并使用position:absolute,其中没有一个工作.
以前有人遇到过这个问题吗？
链接在这里:
注意:目前在开发中并没有在IE中测试过.
代码在这里:
<!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>Act Now</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="application/javascript" language="javascript">
$(document).ready(function() {
/* Act Now Page - sponsor section mousover effect */
$('#an-sponsors').hover(
function () {
$(this).children().children('ul').animate({backgroundColor: "#E8F0E5", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,1)", MozBoxShadow: "2px 2px 6px rgba(212,212,212,1)"}, {queue:false,duration:500});
}, function () {
$(this).children().children('ul').animate({backgroundColor: "#fff", webkitBoxShadow: "2px 2px 6px …