私はしばらくこれに固執していて、私がやろうとしていることをするための最良の方法を本当に理解していません。
私は2つのDivを持っています（もっと必要になるかもしれないことを覚えておいてください）。最初はdiv1のみを表示したいのですが、最初のdivで矢印を押すと、左にスライドし、2番目のdivが表示されます（右からスライドします）。ループするにはどうすればよいですか？css3が使えると思ったのですが、うまくいきませんでした。
これが私がこれまでに得たものです：ここにリンクの説明を入力してください
これはjQueryですが、1つの矢印のみを処理します。
$('.arrow-right').click(function () {
// Slide div to left, and slide new from right ... repeat/Loop
$("#div1").animate({
left: "-999%"
}, 1000, function () {
$("div1").css("block", "none");
$("div2").animate({
// Animate Right Div from right to left ...
});
});
});
アニメーションを左から右に取得しましたが、このアニメーション（スライダーなど）をループして、各divのボタンをクリックする方法がわかりません。
私は正しい方向に進んでいますか？（jQueryでの私の経験は、特にアニメーションで非常にスリムです）
ありがとう！
編集
これは私が望むものにできるだけ近いですが、ループする必要があり、jQueryをあまり変更せずにコンテンツを追加できるようにしたいです。ここにリンクの説明を入力してください
スクリプトがアニメーション化されているときに、スクリプトを「ロック」するようにグローバル変数を設定します。
isAnimating = false;
$('.wrapper').on('click', '.arrow-left', function() {
// Check if the lock is on, if it is, cancel additional clicks
if(isAnimating) return;
// Lock the buttons to avoid multiple user-interaction when script is animating
isAnimating = true;
// Get the current displayed div and the next div to be animated in
var $current = $(this).parents('.MovingDiv');
var $next = $(this).parents('.MovingDiv').next();
// Animate the current div out
$current.animate({
left: "-999%" // Animate to the left
}, 1000, function() {
$current.css({
// This doesn't really do anything important because the start point will be set again the next time the next time it is needed
left: "999%"
})
.appendTo('.wrapper'); // move to end of stack
// Animate the next div in
$next.css({
left: "999%" // set the start point from the right
}).animate({
left: "0%" // complete animation in the middle of the page
}, 1000, function() {
isAnimating = false; // unlock the script when done
});
});
}).on('click', '.arrow-right', function() {
if(isAnimating) return;
isAnimating = true;
var $current = $(this).parents('.MovingDiv');
var $next = $(this).parents('.MovingDiv').siblings().last();
$current.animate({
left: "999%"
}, 1000, function() {
$current.css({
left: "-999%"
});
$next.prependTo('.wrapper') // move to front of stack
.css({
left: "-999%"
}).animate({
left: "0%"
}, 1000, function() {
isAnimating = false;
});
});
});
CSSを次のように変更しました：
.MovingDiv:first-child {
display: block;
}
.MovingDiv {
display: none;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加