0

私は一握りの記事を含むdivを持っています。ユーザーが[次へ]ボタンをクリックすると、既存の記事を左にスライドさせ、記事の次のページをスライドさせて置き換えます。

ここに画像の説明を入力してください

ユーザーが次のリンクをクリックした場合は結果を左にスライドさせ、ユーザーが前のリンクをクリックした場合は右にスライドさせたいと考えています。（カルーセルのようなもの）

これがslideDownアニメーションの実例です。

//Fetch the new result set.
$.ajax({
    url: '/Home/_WhatsNew',
    type: 'POST',
    data: JSON.stringify(jsonData),
    dataType: 'html',
    contentType: 'application/json',

    //The request was a success. Repopulate the div with new result set.
    success: function (data) {
        $("#Content").empty();
        $(data).hide().appendTo('#Content').slideDown();
    },
    error: function (data) {
        alert('Fail');
    }
});

カルーセルのような方法でこれを行うことは可能ですか？

4

1 に答える 1

1

jQuery UIスライド効果を使用できます：

success: function (data) {
    $('#Content')
        .hide('slide', { direction: 'left' }, 400, function () {
            $(this)
                .html(result)
                .show('slide', { direction: 'right' }, 400);
        });
}

スクリプトをページに含めるだけで、次のjquery-ui-1.8.11.jsことができます。

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
于 2012-07-02T18:08:16.037 に答える