Question

我正在使用jquery 1.3.2，这是代码：

    <script type="text/javascript">
    //<![CDATA[
    jQuery(function(){
        jQuery('.news_bullet a.show_preview').click(function() {
            jQuery(this).siblings('div').slideToggle('slow');
            return false;
        }).toggle(
        function() {
            jQuery(this).css({ 'background-position' : '0 -18px' });
        },
        function() {
            jQuery(this).css({ 'background-position' : '0 0' });
        });
    });
    //]]>
</script>

如果你看到here我有一堆小的绿色+，当你点击一些文字时，会显示该链接的背景位置，然后它会显示图像的另一部分，红色 - 。

所以我遇到的问题是我不知道那些隐藏元素的高度，因为它取决于有多少文本，所以当我点击+并显示它们时，动画就是“跳跃”。

我找到的一个解决方法是将固定高度和溢出：隐藏到那些隐藏元素。您可以看到在左上方的块中运行了更平滑的动画（顶部有'Vesti iz sveta crtanog filma'的动画）。所有其他块没有固定的高度，动画有“跳跃”。 Atm，左上方块的固定高度是30px，但是有些元素需要更高的高度，有些要求更少，所以这不是一个好的解决方案... :)

那么如果没有固定的高度，如何阻止这个动画“跳跃”？

Answer 1

如果你在CSS中给它们一个宽度，它将停止这种行为：

.news_bullet .hide { width: 272px; }

甚至使用jQuery：

jQuery(".news_bullet .hide").width(272);

这些选项中的任何一个都会停止跳转幻灯片：）

Answer 2

作为渐进增强的实践者，我首先会告诉您不要在禁用javascript的情况下隐藏任何文本。

页面加载：将元素的高度存储在var中，然后设置高度以隐藏现在的其他文本行。使用该var来设置你在切换中设置动画的高度，你应该没问题。

此处的代码示例：http://www.pewpewlaser.com/articles/jquery-smooth-animation

jquery slideToggle（）和未知高度？

2 个答案: