jQuery的滑塊（DIV粘在一側）

我現在有一個幻燈片般的劇本我的網站上寫道： http://mdunbarconsulting.com/design-m/jQuery的滑塊（DIV粘在一側）

我想這個適應實際「幻燈片」的股利，而不是縮小寬度。您可以單擊更改選項卡或等待（每15秒更換一次選項卡）。

請注意，當從標籤1更改爲另一標籤時，由於寬度縮小，文本會發生變化。

我試過$("#content" + newTab).show('slide', {direction: 'left'}, 1000);但是當我使用整個div幻燈片（正如我所希望的，但），然後右邊的標籤移動旁邊（太晚）。

如何將當前選項卡作爲塊滑出，同時在整個動畫中將選項卡保留在其旁邊？

的JavaScript：

var countDownStart = 10; 
var countDown = countDownStart; 
var currentTab = 1; 
doCountdown(); 
function doCountdown() { 
    setTimeout(
     function() { 
      countDown -= 1; 
      if(countDown == 0) { 
       if((currentTab+1) == 10) { 
        switchTabs(1) 
       } else { 
        switchTabs(currentTab+1) 
       } 
      } 
      doCountdown(); 
     },1000 
    ); 
} 
function switchTabs(newTab) { 
    if(newTab != currentTab) { 
     var newWidth = $("#content" + currentTab).width(); 
     $("#content" + currentTab).animate({width:0}); 
     $("#content" + newTab).animate({width:newWidth}); 
     currentTab = newTab; 
    } 
    countDown = countDownStart; 
} 
function resizeTabs(newSize) { 
    $("#content" + currentTab).animate({width:newSize}); 
} 
$(".tab").click(
    function() { 
     var tabId = parseInt(this.id.substr(-1)); 
     switchTabs(tabId); 
    } 
);

來源

2011-08-29 Matt Dunbar

我不知道我得到了你的問題....

如果不希望文本換行，你可以把它

#content1, #content2, ... { 
    display: none; 
    overflow: hidden; 
    white-space: nowrap; 
}

所以，它不會像寬度正在縮小。

來源

2011-08-29 14:44:01

你明白了。謝謝。 –

如果你能提供你正在使用的HTML，就不難看出這是怎麼回事，

但是，如果我猜對了，你需要隱藏首先打開選項卡，同時打開旁邊的選項卡（您已經擁有此代碼）。

編輯：顯示和隱藏應該是相同的動畫。

來源

2011-08-29 01:02:31 tkt986

是的。代碼鏈接到我想要的工作，除了它的div寬度更改爲0，而不是作爲一個整體滑出。相關的JS在這裏：http：//mdunbarconsulting.com/design-m/tabEffects.js html是在提供的鏈接。 –

jQuery的滑塊（DIV粘在一側）

回答

相關問題