Question

我试图通过一次点击就可以滑入两个元素。我希望第一个元素（img）从左侧滑入，另一个元素（p标记）从右侧滑入，点击一个按钮（{{1 }}）。然后，当点击另一个按钮时，我希望前两个元素逐渐消失，接下来的两个元素（对应于单击的按钮）会滑入。

有没有办法循环使用它们，所以它们总是滑入。

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

li

}）;

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

单击按钮时，同时从左侧和右侧滑动元素？

1 个答案: