jQuery .fadeIn() 工作但 .slideDown() 和 .animate() 不工作答案

【问题标题】：jQuery .fadeIn() working but .slideDown() and .animate() not workingjQuery .fadeIn() 工作但 .slideDown() 和 .animate() 不工作
【发布时间】：2012-11-10 15:53:17
【问题描述】：

我正在尝试建立一个网站，通过 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>

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

【问题讨论】：

这不会解决您的问题，但您可以通过替换 $(location).attr('href'); 来减少代码。 var page = myUrl.substring(myUrl.indexOf('#') + 1, myUrl.length);with page = location.hash.substring(1);
您介意设置一个 Fiddle 吗？ jsfiddle.net
谢谢@Sushil :) 非常感谢，会试一试的。
@Bob 内容是否加载，当你删除 .hide() 东西时你能看到它吗？
@MevinBabu 是的，我尝试删除 .hide() 但这似乎没有帮助，是的，内容加载正常。我将尝试设置一个 jsfiddle，希望这会有所帮助

标签： javascript jquery ajax jquery-animate slidedown

【解决方案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

【讨论】：

【解决方案2】：

我会接受这个...

            if (page.indexOf('/') != -1) {
                $('.main').hide().html(pageHtml).slideDown(400);
            } else {
                $('.main').hide().html(pageHtml).fadeIn(400);
            }

并重新排列以确保您的 if 语句正确

            if (page.indexOf('/') != -1) {
                $('.main').hide().html(pageHtml).fadeIn(400);
            } else {
                $('.main').hide().html(pageHtml).slideDown(400);
            }

如果它现在滑动而不是淡出，则 if 语句已损坏

【讨论】：

不，不用担心，我的页面仍然会使用上述任何一种方式进行更新，但 slideDown 动画似乎不想启动:(

【解决方案3】：

这个呢？这行得通吗？

 var main_div=$('.main');
 main_div.hide();

 $.get('pages/' + page + '.html', function(pageHtml) {
                if (page.indexOf('/') != -1) {
                    main_div.html(pageHtml)
                } else {
                    main_div.html(pageHtml)
                }
            });

 main_div.slideDown(400);

【讨论】：

不怕，页面加载了但是没有动画。如果我将 .slideDown(400) 更改为 .fadeIn(400) 它确实有效......

【解决方案4】：

也许 CSS 中的某些东西一定会阻止它？尝试禁用 main 类的 CSS 并重试？

【讨论】：