开发者

jQuery Slider (div sticks to the side)

开发者 https://www.devze.com 2023-03-31 15:05 出处:网络
I currently have a slideshow-like script I wrote on a site: http://mdunbarconsulting.com/design-m/ I am trying to adapt this to actually \"slide\" the div, rather than shrinking the width.You can cli

I currently have a slideshow-like script I wrote on a site: http://mdunbarconsulting.com/design-m/

I am trying to adapt this to actually "slide" the div, rather than shrinking the width. You can click to change tabs or wait (every 15 secs the tab changes).

Notice how when changing from tab 1 to another tab the text wraps because the width shrinks.

I ha开发者_开发知识库ve tried $("#content" + newTab).show('slide', {direction: 'left'}, 1000); BUT when I use that the entire div slides (as I hoped, BUT) then the tabs to the right of it moves beside it (too late).

How can I make the current tab slide out as a block, while keeping the tab(s) to the right beside it throughout the animation?

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


I am not sure I got your question....

If you don't want the text to wrap, you could make it

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

So, it wouldn't look like the width is shrinking.


If you can provide the html you are working, would be easy to see what is going on,

But if i guess it right, You need to Hide the first opened tab and at the same time open the tab next to it(you already have this code right).

Edit: both show and hide should be same animation.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号