-1

1回のクリックで2つの要素をスライドさせようとしています。ボタン（an）をクリックすると、最初の要素（an img）が左からスライドインし、他の要素（ptag）が右からスライドインするようにしますli。次に、別のボタンがクリックされたときに、最初の2つの要素がフェードアウトし、次の2つの要素（クリックされたボタンに対応）がスライドインします。

それらが常にスライドインするように、これらをループする方法はありますか？

$（'＃nav-button-1'）。click（function（）{

   $('#people-2').hide();
   $('#people-3').hide();
   $('#people-1').show();

$('.slideleft').animate({
    marginLeft: '103px'
  }, 1000, function() {
    // Animation complete.
});
$('#slideright').animate({
    marginRight: '12px'
  }, 1000, function() {
    // Animation complete.
});

}）;

4

1 に答える 1

0

開始する例を次に示します。

オリジナルのJSから関数を作成しました

function doAnimation(id) {
    $(id).children('.slideleft').fadeIn(function () {
        $(this).animate({
            marginLeft: '103px'
        }, 1000, function () {
            // Animation complete.
        });
    });
    $(id).children('.slideright').fadeIn(function () {
        $(this).animate({
            marginRight: '12px'
        }, 1000, function () {
            // Animation complete.
        });
    });
}

これは、ボタンを押すと呼び出されるメソッドです。アニメーションアイテムが含まれているラッパーのIDを受け取り、最終的に上記のメソッドを呼び出します。

function animatePeople(id) {
    // If there are visible people
    if ($('.people:visible').length > 0) {
        // Fade out the visible people and then process the following callback function
        $('.people:visible').fadeOut(function () {
            // Reset the margins
            $('.people').css({
                'margin-left': '',
                'margin-right': ''
            });
            // Do the new animation
            doAnimation(id);
        });
    } else {
        // Do the new animation
        doAnimation(id);
    }
}

最後に、これらはボタンのハンドラーです。

$('#nav-button-1').click(function () {
    animatePeople('#people-holder-1');
});
$('#nav-button-2').click(function () {
    animatePeople('#people-holder-2');
});

jsfiddle

于 2013-02-07T03:18:08.990 に答える