jquery - 单击按钮时同时从左右滑动元素？

Question

我试图让两个元素通过单击滑入。我希望第一个元素 (an img) 从左侧滑入，而另一个元素 (ap标签) 在单击按钮 (an ) 时从右侧滑入li。然后，当单击另一个按钮时，我希望前两个元素消失，接下来的两个元素（对应于单击的按钮）滑入。

有没有办法遍历这些，所以它们总是滑入。

$('#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.
});

});

Answer 1

这是一个开始的例子。

我用你原来的 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