0

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

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

4

4 回答 4

3

知道了！

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

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

于 2012-11-11T18:38:38.710 回答
0

我会拿这个...

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

于 2012-11-10T16:09:08.520 回答
0

那这个呢 ？这行得通吗？

 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);
于 2012-11-10T17:31:51.757 回答
0

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

于 2012-11-15T12:13:17.400 回答