Question

我在使用具有固定高度的容器内的元素上使用jQuery幻灯片动画时遇到问题。我的应用程序中有一个页面，其中有一个大的可滚动div，里面包含许多较小的div，每个div代表用户收件箱中的“消息”。在每个消息div中都有一个“删除”按钮，单击该按钮时，使用jQuery的slideUp()函数隐藏来自较大帧的消息。

这是正常工作，直到我向容器div添加了max-height属性。现在，当单击删除按钮时，没有动画，而div立即突然消失。如果我从帧中删除max-height属性，动画工作正常，但由于帧可以包含任意数量的消息，我真的需要它具有最大高度并且当它超过该高度时可以滚动。

我尝试用自己的动画功能替换内置的slideUp()函数，并用固定的高度替换max-height，但这些都不起作用。

这些是一些相关的CSS和JS样本：

//css  
div.messageList  
    {  
        border: solid 1px #B22222;  
        cursor: default;  
        color: #000000;  
        max-height: 800px;  
        overflow: auto;  
        width: 100%;  
    }  

.unreadMessage  
    {  
        margin: 2px;  
        border: solid 1px #B22222;  
        text-align: left;  
        background-color: #98FB98;  
    }  

//js  
function hideMessage(id) {  
        $('#' + id).slideUp(500);  
    }

Answer 1

我假设你在写帧的时候并不是指一个实际的帧，而是指你的包含DIV（.messageList）

        <style type="text/css">
            div.messageList  
            {  
                border: solid 1px #B22222;
                cursor: default;  
                color: #000;  
                max-height: 200px;
                overflow: auto;  
            }

            div.messageListContainer  
            {

            }

            .unreadMessage  
            {
                padding: 5px;
                margin: 2px;
                cursor: pointer;
                border: solid 1px #B22222;  
                text-align: left;  
                background-color: #98FB98;  
            }  
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".unreadMessage").click(function(){ $(this).slideUp(500); });
            });
        </script>
        <div class="messageList">
            <div class="messageListContainer">
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <!-- Add more messages to test -->

            </div>
        </div>

这在IE7和FF3中对我有用，但我不能说max-height是跨浏览器兼容的，但我认为我拥有的是你想要的。

Answer 2

我尝试了第一个答案，至少在firefox上它也适用于我：你可以看到它here。

建议：检查您的doctype。试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

尝试通过“live（'click'，callback）”函数绑定您的事件，而不是“bind（'click'，callback）”。由于您的内容是通过ajax加载的，因此可确保在页面加载时将事件附加到DOM中不存在的元素。

Answer 3

感谢Hunter的建议。我试过这个，我担心这对我不起作用。我的事件绑定，css和div布局或多或少与您的建议完全一致，但动画仍然是跳跃的。更多细节，虽然我不确定如何相关：

页面上的内容与JQuery的load（）函数异步加载。
这是一个ASP.NET MVC应用程序
我正在使用IE7。

现在我用幻灯片和幻灯片取代幻灯片，这不是世界末日，但我对如何解决这个问题很感兴趣。

PS我不确定我是否应该发布这个作为我自己问题的答案，我对这个网站很新，它告诉我没有足够的声誉来发表评论。

感谢。

Answer 4

我的猜测是dom越来越重，你只看到一帧动画。尝试使用.slideUp（20000）来确定是否存在真正的问题。

Answer 5

这不是一个解决方案，而是一种解决方法，您是否考虑过允许整个页面滚动（而不仅仅是该div）？

Answer 6

像约翰一样，我也假设你的处理程序没有绑定到.load（） - ed dom。尝试使用livequery来解决这个问题。我在这里有一个例子：h ttp://www.madnet.ch/2009/02/28/gallery-included/

在jQuery中，如何在固定高度的父级中制作幻灯片动画？

6 个答案: