Question

试图编辑这个javascript和页面，这样当我点击一个按钮时，一次会出现两个滑动，一个接着滑动，两个滑动到目前为止两次。有点像推拉门。例如，如果你点击墨尔本，我想要两个窗口滑出而不是一个。你可以看到我已经用黑盒子代替了代码，并添加了冗余的javascript。它将最终用作显示表单选项/导航的一种极好的方式。不过，我很难弄清楚如何让两个人同时滑出去。这是代码。有什么帮助吗？

http://jsfiddle.net/justin1390/tL2eo45z/

$(document).ready(function () {
    $('.w3c a').click(function () {
        var location = $(this).data('location');
        var formSelector = '.crmWebToEntityForm[data-location="' + location + '"]';
        console.log(formSelector);
        var targetForm = $(formSelector);
        var formWasAlreadyVisible = targetForm.is(':visible');

        $('.w3c a').removeClass('selected');
        $(".crmWebToEntityForm:visible").hide().animate({
            right: '-320px'
        });

        if (formWasAlreadyVisible) {
            return;
        }

        $(this).addClass('selected');
        targetForm.show().animate({
            right: '0'
        }, 1300);

    });
});

$(document).ready(function () {
    $('.w3c a').click(function () {
        var location = $(this).data('location');
        var formSelector = '.crmWebToEntityForm1[data-location="' + location + '"]';
        console.log(formSelector);
        var targetForm = $(formSelector);
        var formWasAlreadyVisible = targetForm.is(':visible');

        $('.w3c a').removeClass('selected');
        $(".crmWebToEntityForm1:visible").hide().animate({
            right: '-320px'
        });

        if (formWasAlreadyVisible) {
            return;
        }

        $(this).addClass('selected');
        targetForm.show().animate({
            right: '0'
        }, 1300);

    });
});

Answer 1

我很难理解你想要做什么，但是如果你想让两个元素滑动，你为什么不创建两个具有不同背景颜色的div？然后在单击时，您可以为它们分配一个类来为它们设置动画，或者使用jQuery进行动画处理。一个简单的问题就是让一个元素以比另一个元素更慢的速度滑动以使其落后。

//JAVASCRIPT
$('.w3c a').click(function (){
$('#yourElement').addClass('animate');
$('#your2ndElement').addClass('animateSlow');
});

/CSS
#yourElement, #your2ndElement{
position: absolute;
right: 1000px;
}

.animate{
animation: slide 1s linear;
}

.animateSlow{
animation: slide 2s linear;
}

@keyframes slide{
transform: translate(-2000px);
}

不要忘记关键帧上的供应商前缀！

如何使用javascript允许多个滑动框

1 个答案: