jQuery的滑动与CSS边框导致奇怪的“跳” [英] jQuery slide up with CSS border causes strange 'jump'

问题描述

我里■哪些我滑到使用jQuery和动画（）函数的负荷。使用效果基本show（）和了slideDown（）给出了同样的效果，我现在形容：里取值向上滑动就好了，但是当他们的高度是零边框（顶部和底部，1px的）仍然存在，那么振作存在的一次。我不知道...有jQuery的一种方式来获得的边界不是'捕捉'了，但滑动顺畅向上/向下像里的其他或 DIV 或什么的。

I have a load of lis which I slide up using jQuery and the animate() function. Using slideUp() and slideDown() gives the same effect which I will now describe: the lis slide up just fine, but when their heights are zero the borders (top and bottom, 1px) remain, then snap out of existence all at once. I'm wondering... is there a way in jQuery to get the borders to not 'snap' away, but smoothly slide up/down like the rest of the li or div or whatever.

在code我目前是这样的：

The code I have at the moment is this:

.animate({
    height: 'toggle',
    margin: 'toggle',
    padding: 'toggle',
    opacity: 'toggle'
});

我尝试使用边框与 CSS属性'切换'。它工作正常的向上滑动，但滑背下来的时候，边界在缓解动画的结尾扣回的存在。

I tried using the border CSS property with 'toggle'. It works fine for sliding up, but when sliding back down, the borders snap back into existence at the end of the easing animation.

推荐答案

我知道你在说什么。我以前做了这一点，并有同样的问题。解决方法是动画边框div中含有格。其具有相同的效果。

I know what you are talking about. I've done this before and had the same issue. The work around is to animate a containing div inside of the border div. Its the same effect.

例如...

<!--- Flakey --->
<div class="border slideMe">
   Content here...
</div>

<!--- Correct --->
<div class="border">
   <div class="slideMe">
      Content here...
   </div>
</div>

希望这可以节省你一些头痛的问题。

Hope this saves you some headache.

这篇关于jQuery的滑动与CSS边框导致奇怪的“跳”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！