0

現在のコンテンツを ajax 応答に置き換える ajax 呼び出しを介してページをロードする Web サイトをセットアップしようとしています。人々がページをブックマークできるように、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() は正常に動作します。

他の誰かが同じ問題を抱えている場合の詳細については、次のリンクを 参照してください 。チュートリアル:Getting_Around_The_Minimum_Height_Glitch

于 2012-11-11T18:38:38.710 に答える
0

多分CSSの何かがそれをブロックしているに違いない? クラスの CSS を無効にして、mainもう一度やり直してください。

于 2012-11-15T12:13:17.400 に答える
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

私はこれを取るだろう...

            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 に答える