javascript - jQuery .fadeIn() 工作但 .slideDown() 和 .animate() 不工作

Question

我正在尝试建立一个网站，通过 ajax 调用加载页面，并用 ajax 响应替换当前内容。我在 URL 末尾添加了 # 和页面名称，以便人们可以为页面添加书签。

• www.examplesite.com#home
• www.examplesite.com#examples
• www.examplesite.com#examples/example1
• www.examplesite.com#examples/example2

我对 jQuery 和 JavaScript 不太熟悉，但当我转到存储在子文件夹中的页面时，我试图获得不同的页面动画。 fadeIn() 在页面和子文件夹中的页面上都可以正常工作，但是我根本无法让 .slideDown() 或 .animate() 工作。这是我的代码的摘录:

<script>
//All pages are stored in a folder called 'pages' or a subfolder of 'pages'
    $(document).ready(function(){
        var myUrl = $(location).attr('href');
        var noPage = myUrl.indexOf('#');
        if(noPage == -1) {
            location.hash = 'home';
        }
        window.onhashchange = function() {
            pageChange();
        }
        function pageChange() {
            var myUrl = $(location).attr('href');
            var page = myUrl.substring(myUrl.indexOf('#') + 1, myUrl.length);
            $.get('pages/' + page + '.html', function(pageHtml) {
                if (page.indexOf('/') != -1) {
                    $('.main').hide().html(pageHtml).slideDown(400);
                } else {
                    $('.main').hide().html(pageHtml).fadeIn(400);
                }
            }); 
        };
        pageChange();
    });
</script>

如果我从完全错误的方向接近这个问题，这就是它不起作用的原因，请随时通过给我一个它应该如何工作的例子来指出我正确的方向。

Answer 1

明白了!

我在几个 div 中使用了 css min-height 属性，这样如果页面上有很多内容，页面会自动随内容扩展。如果我删除 min-height 属性并将其替换为固定高度 .slideDown() 效果很好。

如果其他人有同样的问题，这里有一些链接可提供更多信息: http://www.only10types.com/2011/09/jquery-slidedown-doesnt-work-on.html http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch