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

试图编辑此javascript和页面，以便当我点击一个按钮时，两次滑动将一次发生，一个在另一个之后滑动两次。有点像推拉门。例如，如果你打墨尔本，我想要两个窗口而不是一个。你可以看到我已经用黑盒子把代码填满了，并添加了多余的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); 

    }); 
});

来源

2016-01-06 Justin C

我难以理解你想要做什么，但如果你想有两个元素滑动，你为什么不只是创建两个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); 
}

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

来源

2016-01-06 08:49:14

这就是我在这里所做的：http://jsfiddle.net/justin1390/9txoj102/3/ 这基本上就是我想要的。问题是如果这是最有效的方式来做到这一点。你的看起来很简单，但我无法控制它进出的方式。 –

@JustinC我更喜欢CSS动画，因为我通常发现性能比jQuery动画更好。你可能不得不做一些数学或试验/错误来确定每个盒子应该滑动多长时间。 –

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

回答

相关问题