0

所以，

我已经将两个相邻 DIV 的 JSfiddle 放在一个容器 div 中。当光标悬停在两个子 div 上时，它们应该水平扩展以填充容器。这适用于最左边的 DIV，但是当我尝试与右侧的子 DIV 相同的动画（即，必须在两个方向上扩展以填充容器的 DIV）时，它运行不顺畅。我试图同时为子 DIV 向容器左边缘的移动及其扩展设置动画，但这些属性在我正在使用的脚本中不起作用。有什么想法吗？

请参阅此处的 JSfiddle 。（此小提琴已过时，更新版本见下文）

编辑：

我在使用这个 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中看到的那样。我确信这与我的父容器的溢出属性有关，但我能想到的唯一可能的原因是：

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

这些是有问题的 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; 
}
4

1 回答 1

0

通过为 DIV 设置负左边距以将它们引导到正确的位置并避免闪烁，我能够获得所需的效果。jsfiddle 在这里。

于 2012-09-27T00:29:01.370 回答