如何允許使用javascript的多個滑動框

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); 
} 

不要忘記您的關鍵幀上的供應商前綴！