2

我使用 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>

如果您在这里看到我有一堆小的绿色+，当您单击某些文本时会显示该链接并且该链接的背景位置会更改，因此它会显示图像的另一部分，红色-。

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

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

那么在没有固定高度的情况下如何阻止这个动画“跳跃”呢？

4

2 回答 2

3

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

.news_bullet .hide { width: 272px; }

甚至使用 jQuery：

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

这些选项中的任何一个都将停止跳动的幻灯片:)

于 2010-03-25T19:19:49.757 回答
0

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

在页面加载时：将元素的高度存储在 var 中，然后设置高度以隐藏额外的文本行，就像现在一样。使用该 var 来设置您在切换中设置动画的高度，您应该没问题。

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

于 2010-03-24T23:42:30.817 回答