Jquery滑動面板使用動畫定位問題

我想創建一個由3個列表項目組成的導航面板。當點擊一個列表項時，相應的一組鏈接（subnav）滑出來顯示它自己。Jquery滑動面板使用動畫定位問題

在本演示中，技術是可行的，但它是一個有點馬車。關閉按鈕和（+）按鈕似乎失去了他們的地位，你點擊一個鏈接。他們似乎失去了他們的相對定位，並且表現得好像他們相對於集裝箱而不是他們的父母是絕對定位的。

我想以另一種方式寫這篇文章，或者看看是否有其他開發人員有更好的技術來完成這個相同的任務。目前我jQuery是如下：

$("#serviceBox li a").on("click", function(){ 
     $(this).animate({ 
      'left' : -250 
     }, {duration: 200, queue: false, easing: 'linear'}); 

     $(this).next(".panel").animate({ 
      'left' : 0 
     }, {duration: 200, queue: false, easing: 'linear'}); 
    }); 

    $("a.closePanel").on("click", function(){ 
     $(this).parent().animate({ 
      'left' : 250 
     }, {duration: 200, queue: false, easing: 'linear'}); 

     $(this).parent().prev("a").animate({ 
      'left' : 0 
     }, {duration: 200, queue: false, easing: 'linear'}); 
    });

我設置隊列爲false，因爲我想要的動畫是相互同步。讓我知道你是否想在這裏看到HTML和CSS（這是目前的小提琴）。提前致謝。

來源

2013-03-25 JCHASE11

關閉和打開按鈕失去其定位的原因是因爲它們繼承了父容器的相對值，這會超出其絕對位置。只需將position:relative加到#serviceBox li .panel a.closePanel就可以了！

來源

2013-03-26 16:42:27 JCHASE11

Jquery滑動面板使用動畫定位問題

回答

相關問題