Question

我目前在网站上写了一个类似幻灯片的脚本： http://mdunbarconsulting.com/design-m/

我正在尝试调整它以实际“滑动”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);
    }
);

Answer 1

如果你能提供你正在使用的html，很容易看出发生了什么，

但如果我猜对了，你需要隐藏第一个打开的标签，同时打开它旁边的标签（你已经有了这个代码）。

编辑：显示和隐藏都应该是相同的动画。

Answer 2

我不确定我有你的问题......

如果您不希望文本换行，可以将其设为

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

所以，看起来宽度不会缩小。

jQuery Slider（div粘在一边）

2 个答案: