Question

SO，

我在容器div中放置了两个相邻DIV的JSfiddle。当光标悬停在容器上时，两个子div应该水平扩展以填充容器。这对于最左边的DIV工作正常，但是当我尝试使用右边的子DIV进行相同的动画时（也就是说，必须在两个方向扩展的DIV以填充容器），它不会运行顺利。我试图将子DIV的移动动画到容器的左边缘并同时进行扩展，但是属性在我正在使用的脚本中不起作用。有什么想法吗？

参见JSfiddle here。（这个小提琴已过时，更新后的版本见下文）

修改

我使用这个JScript在DIV向左移动动画方面取得了进展：

$(document).ready(function() {
    $("#profdevcontainer").hover(function() {
        $(this).stop().animate({
            width: '1005px',
            marginLeft: '-170px',
            // 'z-index': '99'
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            width: '250px',
            marginLeft: '0px'
        }, 'fast');   
    });
});

但是当DIV的动画接近完成时，它会消失，因为你可以在更新的JSfiddle中看到。我确定这与我父容器的overflow属性有关，但我能想到的唯一可能的原因是：

我在悬停时应用的CSS属性和我用javascript动画的属性之间存在冲突，
动画尺寸会以某种方式触发溢出。

这些是相关div的CSS：

#profdevcontainer {
width: 250px;
height: 60px;
background-color: yellow;
float: left;
margin-right: 3px;
}

#profdevcontainer:hover {
/* animated wit css / width: 1005px; */
/* animated wit css / height: 60px;
/* animated wit css / background-color: yellow;
/* animated wit css / float: left; */
/* position: absolute; */
z-index: 99;
margin-right: 3px; 
}

Answer 1

我能够通过为DIV设置负左边距的动画来获得所需的效果，以引导他们到达正确的位置并避免闪烁。 jsfiddle是here。

使用Jquery动画Div宽度和位置（或消失Div的情况）

1 个答案: