Javascript 带slideDown（）/slideUp（）的水平溢出

我试图使用slideUp（）/slideDown（）来设置页面元素显示的动画，但在使用相对位置的图标时遇到了问题，该图标的位置为负数（在元素外部）。当这些动画执行时，它会将溢出设置为“隐藏渲染”“我的图标切成两半”，直到动画完成

这说明了我的问题。我需要在整个动画执行过程中看到蓝色框的水平溢出，而不是神奇地出现在最后。我还需要垂直溢出保持隐藏

我试过修改

$(this).parent().find("div:eq(0)").slideDown(1000).css("overflow-x", "visible");

但它似乎被忽视和使用

$(this).parent().find("div:eq(0)").slideDown(1000).css("overflow", "visible");

还使垂直溢出可见

---

任何洞察都将不胜感激。

只需将您的div像：div.clickEvent那样包装在other div.hide中即可

<div class="hide"><div class="clickEvent"> 
... 
</div>

... 

试试这个：

$('.clickMe').toggle(function() {
    var div = $(this).parent().find("div:eq(0)").show();
    var parent = div.parent();
    var wrapper = $('<div>', {'class': 'hide wrapper', html: div});
    parent.append(wrapper);
    wrapper.slideDown({duration:1000, complete: function(){parent.append(div);wrapper.remove();}});
}, function() {
    var div = $(this).parent().find("div:eq(0)");
    var parent = div.parent();
    var wrapper = $('<div>', {'class': 'wrapper', html: div});
    parent.append(wrapper);
    wrapper.slideUp({duration:"fast", complete: function(){parent.append(div);wrapper.remove();div.hide()}});
});

$（'.clickMe'）。切换（函数（）{
var div=$（this.parent（）.find（“div:eq（0）”）.show（）；
var parent=div.parent（）；
var wrapper=$（“”，{'class'：'hide wrapper'，html:div}）；
parent.append（包装器）；
slideDown（{duration:1000，complete:function（）{parent.append（div）；wrapper.remove（）；}}）；
}，函数（）{
var div=$（this.parent（）.find（“div:eq（0）”）；
var parent=div.parent（）；
var wrapper=$（“”，{'class'：'wrapper'，html:div}）；
parent.append（包装器）；
slideUp（{duration:“fast”，complete:function（）{parent.append（div）；wrapper.remove（）；div.hide（）}}）；
});

这与我已经提供的（包装解决方案：）是的，我在你的解决方案出现之前就开始发布了。我猜它们是同一解决方案的不同方法，在我正在处理的实际项目中，有更多的选项也无妨。div上面有几个父元素，它们都具有相同的宽度规格。我不也需要包装那些父元素吗？我担心这会导致不良副作用。Allison问题不是来自任何宽度。动画过程的工作原理很简单。使用包裹解决方案时，实际上是让浏览器处理该宽度。所以我知道你们有一种可重用的组件，所以只需要把它包装成一个div，就这样。因为父元素具有相同的设置宽度，所以将容器的宽度设置为100%不起作用，因为它继承了父元素的宽度。对不起，女士，刚刚更新。这个宽度实际上不是必需的，所以我删除了它。：）