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

【问题标题】：Animating Div Width and Position with Jquery (or The Case of the Disappearing Div)使用 Jquery 为 Div 宽度和位置设置动画（或 Div 消失的情况）
【发布时间】：2012-09-18 00:12:53
【问题描述】：

所以，

我将两个相邻 DIV 的 JSfiddle 放在一个容器 div 中。当光标悬停在两个子 div 上时，它们应该水平扩展以填充容器。这适用于最左边的 DIV，但是当我尝试与右侧的子 DIV 相同的动画（即，必须在两个方向上扩展以填充容器的 DIV）时，它不会t 运行平稳。我试图动画子 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 中看到的那样。我确定这与我的父容器的溢出属性有关，但我能想到的唯一可能原因是：

我在悬停时应用的 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; 
}

【问题讨论】：

仅供参考 - CSS 中的 cmets 是 /* */，而不是 //。另外，作为对您问题的回答-您正在尝试将 left:auto 的值设置为 left:0 的动画-这导致了您的跳跃。在这里查看.position() 或.offset() 以获得答案。

标签： jquery html jquery-animate position

【解决方案1】：

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

【讨论】：