Question

我正在尝试建立一个网站，通过ajax调用加载页面，用ajax响应替换当前内容。我在网址的末尾添加了一个＃和一个页面名称，以便人们可以预订标记页面。

www.examplesite.com＃家
www.examplesite.com＃实例
www.examplesite.com＃实例/例1
www.examplesite.com＃实例/例2

我是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

Answer 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语句已损坏

Answer 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);

Answer 4

CSS中的某些内容必须阻止它吗？尝试禁用main类的CSS并重试？

jQuery .fadeIn（）工作，但.slideDown（）和.animate（）不工作

4 个答案: