javascript - 高さが可変の jQuery アニメーションスライダーと Ajax コンテンツ

Question

フローティング div に一連のリンクがあります (したがって、それらは常に表示されます)。ユーザーがクリックすると、次のことが順番に発生するようにしたいと思います。

ページが一番上 (ajax コンテナーがある場所) までスクロールします。
現在のコンテンツがスライドアウトします
新しいコンテンツが読み込まれます (ajax)
新しいコンテンツがスライドイン

注: 各 ajax ファイルの内容は異なるため、ajax コンテナーは収まるように拡張/縮小する必要があります。

jQuery UI を使用せずにこれを行い、コードをできるだけ軽量に保ちたいと考えています。

私は一日中コールバックとキュー関数でこれをやろうとグーグルで検索してきましたが、意図したとおりに動作させるのに苦労しています。これらの関数を構造化して機能させる方法を理解できる人がいれば、非常に感謝しています。

私がどこにいるのかを示すためにコードを抽象化しました: http://pastebin.com/xbJKPmnw

現在、ページの上部をスライドさせ、コンテンツをロードしています。しかし、私はまだトランジションをスムーズかつ順番に機能させていません。

よろしくお願いします。

score 3 · Accepted Answer

私の理解が正しければ、トランジション自体を除いて、すべて (ボディスクロール、ajax フェッチコンテンツ) が整理されています。

必要なことを行う私のプロトタイプは次のとおりです。

古いコンテンツをスライドアウトさせます
新しいコンテンツをスライドインさせます
新しいコンテンツに合わせて動的コンテンツコンテナのサイズを変更する

jsFiddle の作業: http://jsfiddle.net/dipish/vhd8e/

コードは非常にハックですが、提案されたアプローチの主なアイデアを提供します。リンクの「rel」属性を使用して、静的なモックコンテンツを参照します。実際には、ajax リクエストを作成し、データをフェッチしてからトランジションを起動します。

サンプル HTML:

<div id="primarynav">
              <ul id="navigation">
                  <li><a href="page1.html" class="selected" rel="content1">Page 1</a></li>
                  <li><a href="page2.html" rel="content2">Page 2</a></li>
                  <li><a href="page3.html" rel="content3">Page 3</a></li>
              </ul>
          </div>

<div id="ajax-content"></div>

<div class="preload">
    <div id="content1">I have a series of links on a floating div (so they're always visible). When a user clicks one, I would like the following to happen in sequence:

The page scrolls up to the top (where the ajax container is located)
The current content slides out
The new content loads (ajax)
The new content slides in
NB: As the content in each ajax file is different, the ajax container will need to expand/contract to fit.

I would like to do this without jQuery UI, and keep the code as lite as possible.

I've been googling and attempting to do this with callbacks and queue functions all day, but struggle to get it working as intended. If anyone can please help me understand how to structure these functions to get it working I'd be incredibly grateful.

I've abstracted my code to show you where I'm at: http://jsfiddle.net/Cz5kg/1/

It currently slides the top of the page, and loads the content. But i'm yet to get the transitions working smoothly and in sequence.

Many thanks in advance.</div>

    <div id="content2">I'm writing a simple javascript to calculate the time difference between server and user time. But something is going wrong.

If I catch the javascript and php date i have:

date("M d Y h:i:s A")
php date : Wed Jun 27 2012 04:10:41 AM  

new Date()
J S date : Wed Jun 27 2012 10:10:40 GMT+0200 (CEST)   
This is correct! I have two different time for local and server time.

Now if I take the seconds time... something goes wrong:

(php: date("U"))
sec PHP: 1340784640    

(js new Date().getTime()/1000 )
sec J S: 1340784640
I got the same time!

Can you help me to fix it ?

Thanks!
    </div>

    <div id="content3">I've been given a big project by a big client and I've been working on it for 2 months now. I'm getting closer and closer to a solution but it's just so insanely complex that I can't quite get there, and so I need ideas.

The project is quite simple: There is a 1mil+ database of lat/lng coordinates with lots of additional data for each record. A user will visit a page and enter some search terms which will filter out quite a lot of the records. All of the records that match the filter are displayed (often clustered) on a Google Maps.

The problem with this is that the client demands it's fast, lean, and low-bandwidth. Hence, I'm stuck. What I'm currently doing is: Present the first clusters, and when they hover over a cluster, begin loading in the data for that clusters children.

However, I've upped it to 30,000 of the millions of listings and it's starting to drag a little. I've made as many optimizations that I possibly can. When the filter is changed, I AJAX a query to the DB and return all the ID's of the matches, then update the map to reflect this.

So, optimization is not an option. I need an entirely new conceptual model for this. Any input at all would be highly appreciated, as this is an incredibly complex project of which I can't find anything in history even remotely close to it- I even looked at MMORPG's which have a lot of similar problems, and I have made a few, but the concept of having a million players in one room is still something MMORPG makers cringe at.

I'll be awarding 500 rep as soon as it becomes available for anything that solves this.

Thanks- Daniel.        
    </div>
</div>

一部の CSS (ほとんど変更なし):

ul li { float: left;margin: 0 15px 0 0; }

#ajax-content { 
    width:500px; /* fixed width just for viewing convenience */
    clear:both; 
    border: solid 1px black; /* border just for debugging purposes */
    position: relative; /* to contain absolutely positioned children */
    height: 100px; /* initial height */
}

.preload { /* for test purposes */
    display: none;
}

.item-container {/* style your inner content*/}

最後に、多くのコメントを追加して修正した JavaScript:

$(document).ready(function() {

    var $navlinks = $('#navigation li a'),
        $ajaxcontent = $('#ajax-content'),
        animDur = 5000, // animation duration
        isTransitionRunning = false;

    $navlinks.click(function(e) {        
        e.preventDefault(); // prevent default action
        // block actions until current transition finishes
        if(isTransitionRunning) {
            return false;
        }                
        var contentWidth = $ajaxcontent.width(),
            newContent = $('#' + $(this).attr('rel')).html(), // mock content                
            $newItem = $(document.createElement('div')), // nested container for new content
            newItemHeight,
            newContentHeight,
            $oldItem = $ajaxcontent.children('.item-container');

        // set the flag indicating that the transition is running
        isTransitionRunning = true;

        $newItem.addClass('item-container');

        $('html, body').animate({scrollTop:0}, 'slow');              

        //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
        $navlinks.removeClass('selected');
        $(this).addClass('selected');

        /*$.ajax({ url: this.href, success: function(html) {
            $ajaxcontent.empty().append(html);
            }
        });*/

        // freeze current ajax container height
        $ajaxcontent.height($ajaxcontent.height());
        $ajaxcontent.css('overflow', 'hidden');

        // slide away old item (if any)
        if($oldItem.length) {
            $oldItem
                 // fix width so no wrapping occurs during transision
                .width(contentWidth) 
                // position absolutely
                .css('position', 'absolute')
                .animate({
                    left: -contentWidth // move new content at the right edge of container
                },
                animDur,
                function() {
                    // remove old content at the end
                    // you may want to cache it instead
                     $oldItem.remove();
                });
        }

        // append new content to container
        $newItem.html(newContent);
        $ajaxcontent.append($newItem);
        // fix new content width
        $newItem.width(contentWidth);
        // determine height of new content when it's appended to DOM
        newItemHeight = $newItem.height();

        // set up new content
        $newItem
            // move it to the right
            .css('position', 'absolute')
            .css('left', $ajaxcontent.width() + 'px')
            // sliding animation
            .animate({
                left: 0
            }, 
            animDur,
            function() {
                // restore css
                $newItem.css('position', 'static');
                $newItem.css('width', 'auto');
            });

        // change ajax container height
        $ajaxcontent.animate({
            height: newItemHeight
        },
        animDur,
        function() {
            // now let ajax container naturally wrap around its content
            $ajaxcontent.css('height', 'auto');
            $ajaxcontent.css('overflow', 'auto');

            // unset the transition running flag
            isTransitionRunning = false;
        });

        return false;
    });

    //$ajaxcontent.empty().append("<div id='loading'><img src='http://expression.ws/stackoverflow/load.gif' alt='Loading Content' /></div>");
    $.ajax({ url: 'page1.html', success: function(html) {
            $ajaxcontent.empty().append(html);
    }
    });
});

</p>

そこで何が起きているかは明確である必要がありますが、もちろん質問があれば遠慮なくお尋ねください。私は jQuery 忍者ではないので、私が行っているいくつかのことは少し非効率的かもしれませんが、アイデアは変わりません。

実装の本質は次のとおりです。

コンテナに新しいコンテンツを追加する前に、その寸法を修正して作成してくださいoverflow: hidden;
新しいコンテンツを DOM に挿入した後、その高さを測定します (コンテナーの幅に設定した後)。これがコンテナのターゲット幅になります
トランジションを行った後、自然な要素フローを復元する位置/寸法を強制するすべての CSS を削除します (常に必要というわけではありませんが、一般的に推奨されます)。</li>

プロトタイプの制限:

コンテンツが既に ajax を介して取得され、挿入する準備ができていると仮定します。
一方向にしかスライドしない
要素にパディングとマージンがある場合にこのコードがどのように機能するかをテストしませんでした。ディメンションを設定し要素を配置するためのjqueryのメソッドは、期待どおりにそれを常に自動的に処理するとは限らないため、通常、ここでいくつかの調整を行う必要があります。

お役に立てれば！

アップデート。 遷移が現在実行されている場合に実行をブロックする単純なロジックを追加しました。StackOverflow の編集履歴で違いを確認できます。一般に、これは良いアプローチではありませんが、実装は簡単です。真のクリック雪崩耐性ウィジェットを実装するには、より多くの労力とより優れたコードアーキテクチャが必要です。それでもその方法を希望する場合、またはこれにサードパーティのウィジェットを使用する場合はお知らせください。

これを AJAX データフェッチと結び付けるには、コンテンツが既にフェッチされているときにトランジションを実行する必要があります。疑似コードは次のとおりです。

$navlinks.click(function(e) {        
    e.preventDefault(); // prevent default action
    // block actions until current transition finishes
    if(isTransitionRunning) {
        return false;
    }  

    // If content is static, you don't want to fetch it everytime,
    // consider implementing some caching mechanism
    $.ajax({ url: this.href, success: function(html) {
        // this function is basically all the code posted above 
        // except that it takes new html content as parameter
            switchContent(html);
        }
    });
});
});

score 1 · Accepted Answer

http://explosion-pills.com/11185244.php

このページは、あなたが求めていると思うことを実行します (スタイリングは一切行いませんでした。それはあなたに任せます)。

要素がキューに入れられる方法を少し変更する必要があるだけです。また、いくつかの場所で必要だと思うよりも少し多くのことを行っています（.empty().appendvs..html()たとえば）。

的外れな場合はお知らせください。

javascript - 高さが可変の jQuery アニメーション スライダーと Ajax コンテンツ

2 に答える 2

Related

Reference

javascript - 高さが可変の jQuery アニメーションスライダーと Ajax コンテンツ