水平jQuery向下滑動滑下

Question

我想有一個水平滑塊滑過單個視圖（在Wordpress中）「頁面」。 我的代碼幾乎可以工作，但不是水平滑動塊，而是將頁面向下滑動一點（即按下鍵盤上的向下按鈕）。

這裏是我的代碼：

<style> 
    #main 
    { 
     overflow: hidden; 
    } 

    #primary 
    { 
     position: relative; 
    } 

    div.content div 
    { 
     position: absolute; 
     width:100%; 
     top:25px; 
     left:0px; 
    } 
    #box1 { background: yellow; left:0px;} 
    #box2 { background: orange; left:100%; } 
    #box3 { background: #838EDE; left:200%; } 
    #box4 { background: #FFFCC; left:300%; } 
    #box5 { background: red; left:400%; } 

    #navlinks li 
    { 
     float: left; 
     display: inline-block; 
     background: #F3F3F3; 
     border-top: 1px solid #E5E5E4; 
     height: 20px; 
     width: 15%; 
     text-align: center; 
     padding: 10px 0px; 
     border-bottom: 1px solid #e5e5e4; 
     margin: 0px 5px; 
    } 

    #navlinks > li.current, #navlinks > li:hover 
    { 
     background: #cc0000; 
     border-color: #A00; 
    } 

    #navlinks > li a 
    { 
     color: #303030; 
     text-decoration: none; 
    } 

    #navlinks > li.current a, #navlinks > li:hover a 
    { 
     color: #fff; 
    } 

    #navlinks > li.tab1, #navlinks > li.tab5 
    { 
     margin: 0px; 
    } 

    #navlinks > li:after 
    { 
     width: 0px; 
     height: 0px; 
     border-style: solid; 
     border-width: 50px 0 50px 50px; 
     border-color: transparent transparent transparent #f3f3f3; 
     line-height: 0px; 
    } 
</style> 

<div id="primary" class="site-content"> 
    <ul id="navlinks"> 
     <li class="tab tab1 current" data-href="#box1"><a>Link 1</a></li> 
     <li class="tab tab2" data-href="#box2"><a>Link 2</a></li> 
     <li class="tab tab3" data-href="#box3"><a>Link 3</a></li> 
     <li class="tab tab4" data-href="#box4"><a>Link 4</a></li> 
     <li class="tab tab5" data-href="#box5"><a>Link 5</a></li> 
    </ul> 

    <div class="content" role="main"> 
     <div id="box1">Blok 1</div> 
     <div id="box2">Blok 2</div> 
     <div id="box3">Blok 3</div> 
     <div id="box4">Blok 4</div> 
     <div id="box5">Blok 5</div> 
    </div><!-- #content --> 
</div><!-- #primary --> 

<script> 
var j = jQuery.noConflict(); 
j(document).ready(function(j) { 
    j(document).on('click', '#navlinks li', function() { 
     j('.tab').removeClass('current'); 
     j(this).addClass('current'); 

     var panel = j(this).data('href'); 
     j.scrollTo(panel, 1000); 
    }); 
}); 
</script> 

您可能會在<style></style>代碼中看到任何未知的類或ID是從頁眉或頁腳（如#main）。 scrollTo()功能來自plugin。

我試圖創建一個jsFiddle，但出現更糟：/。 有人在我的代碼中看到任何錯誤嗎？提前致謝。

UPDATE： 我已經做了的jsfiddle我目前的設置： jsfiddle.net/UkP4X

Answer 1

雖然它不是一個回答您的問題，我可以推薦使用https://github.com/thebird/Swipe的滑塊。它非常寬容，適用於移動設備。

爲了更好地看到您的問題，我建議您將CSS格式化爲非行，以提高可讀性並使用類而不是ID來進行樣式設計。

a { 
    margin-right:15px; 
    cursor:pointer; 
    text-decoration:underline; 
    color:blue; 
} 

Answer 2

無需使用插件即可使用css3 transition實現此目的。

添加以下的CSS：

.content{ 
position: relative; 
overflow: hidden; 
clear:both; 
} 
.content div { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
transition: transform 1s ease-in-out; 
} 
.show{ 
transform:translate(0%); 
} 
.hide{ 
transform:translate(100%); 
} 

在HTML中，添加show類要顯示和應用hide類剩下的第一個標籤。

然後改變你的腳本

$(document).ready(function (j) { 
    $(document).on('click', '#navlinks a', function() { 
    var panel = $(this).data('href'); 
    $('.show').toggleClass('hide').toggleClass('show'); 
    $(panel).toggleClass('hide').toggleClass('show'); 
    }); 
}); 

檢查這個JSFiddle

UPDATE

按照意見，對老的瀏覽器兼容性，可以結合CSS和使用jQuery animate()的如下：

css：

content{ 
position: relative; 
overflow: hidden; 
clear:both; 
} 
.content div { 
position:absolute; 
top:0; 
width:100%; 
left:100%; 
} 
div.shown{ 
left:0%; 
} 

在HTML中，爲最初應該顯示的div添加類shown。

腳本：

$(document).ready(function (j) { 
    $(document).on('click', '#navlinks a', function() { 
    var panel = $(this).data('href'); 
    $('.shown').removeClass('shown').css('left','100%'); 
    $(panel).animate({ 
     left: '0%' 
    },500, function(){ 
    $(panel).addClass('shown'); 
    }); 
    }); 
}); 

檢查此JSFiddle