jqueryアニメーション2.要素座標アニメーション効果(絵コリドーの作成)_jquery

key = "image1",
details = {
image1: {
position: 0,
title: slide.children().eq(0).attr(' alt')
},
image2: {
position: -400,
title: slide.children().eq(1).attr('alt')
},
image3: {
position: -800,
title: slide.children().eq(2).attr('alt')
},
image4: {
position : -1200,
title: slide.children().eq(3).attr('alt')
},
image5: {
position: -1600,
title: slide.children().eq(4).attr('alt')
}
};

$('

', {
id: 'title',
text: 詳細[key].title
}).prependTo('#slider');

function postAnim(dir) {
//まず、数値部分のみを含む現在のアクティブな画像の ID を取得します。
var keyMath = parseInt(key.match(/d $/))
// スライドの左側は小さいです。 0 より大きい場合は、現在アクティブな画像が画像 1 ではないことを意味し、「前」のナビゲーションが表示されます。それ以外の場合、「前」のナビゲーションは表示されません
(parseInt(slide.css('left')) //スライドの左側は -1600 に等しく、これは現在アクティブな画像が第 5 章であり、「次」のナビゲーションが消え、それ以外の場合は「次」が表示されます。 ' ナビゲーションは
(parseInt(slide.css('left') ) === -1600) ? next.hide() : next.show(); // if 条件文のみ「前」と「次」のナビゲーションを使用する場合に意味があります。実装された関数は、「前へ」をクリックしてキーを 1 つ減らし、「次へ」をクリックしてキーを 1 つ増やすことです。
if (dir) {
var titleKey = (dir === 'back') ? keyMath - 1 : keyMath 1;
key = 'image' titleKey;
}
//h2 タイトルをリセットします
container.find('#title').text(details[key] .title);
//現在アクティブな画像をリセットします
container.find('.active').removeClass('active');
container.find('a[href=#' key ']' ).addClass('active');
}


次に、「前」と「次」のナビゲーション関数を完成させます。

// デフォルトのイベントを防止します。そうでないとアニメーション効果が失われます。
e.preventDefault();
var arrow = $(this).parent(); / 現在のスライドにはアニメーションがありません 新しいアニメーション効果を追加するとき
if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr(' id')) == = 'prev') ? ' =400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id") ) === "prev ") ? postAnim("forward") :
}
}; 最後に、画像関数実装の対応するナビゲーション。




コードをコピー

slide.animate({
left: 詳細[key]. Position
} , 'slow', 'easeOutBack', postAnim);


このレッスンの内容は完了です。デモをダウンロードして関数を確認できます。は次のように実装されます。

デモのダウンロード アドレス:
jQuery.animation.position