讓jQuery在一行中向左+右滑動2個對象

Question

我有一個小功能，可以通過滑動效果從左到右切換我的內容。不幸的是，兩個div對象（與inline-block）由於它們的大小在滑動時並不相鄰，但其中一個明顯總是在另一個下面。

看到jsfiddle code here

我試過如下：

• 設置float:left根本不
• 定位div的絕對，這有助於幫助，但滑動時，也產生了一些意想不到的行爲從右到左（自己動手試試）
• 延遲/排隊動畫，作品但不真正用戶友好延遲

我也想提一下，當你希望你的對象都居中時，浮動和不同的位置並不是非常有用，所以我寧願另一種解決方案。

也許你們有一個想法，我怎麼能使這個順利，使div對象留在一行？！

Answer 1

做了很多的變化，我們對此深感抱歉，但試試這個：

http://jsfiddle.net/jcZ6J/9/

另外請注意，你不應該放置div的a標籤內。

HTML

<div class="content"> 
    <a href="index.php?show=camp" class="container" data-title="camp"><h2>CAMPS<br />149 &euro;</h2></a> 
    <a href="index.php?show=course" class="container" data-title="course"><h2>COURSES<br />49 &euro;</h2></a> 

    <div class="slider-viewport"> 
    <div class="slider-carriage"> 
     <div id="camp" class="show" title="left"><span>CAMP-INFO</span></div> 
     <div id="course" class="show" title="right"><span>COURSES</span></div> 
    </div> 
    </div> 
</div> 

---

JS

$(function() { 
    $('.container').click(function(evt) { 
     evt.preventDefault(); 
     $('.slider-carriage').stop(false, false).animate({ 
      left: (-100 * $('#' + $(this).data('title')).position().left/$('.slider-viewport').width()) + '%' 
     }, 1000); 
    }); 
}); 

小更新到這裏來，調整窗口的大小不是問題

---

CSS

@charset "utf-8"; 

body { 
    color: #FFF; 
    background-color:#09F; 
    font-family: "Arial"; 
    font-size: 14px; 
    margin: 0px; 
} 

/* CONTENT */ 
.content { 
    width:100%; 
    text-align:center; 
} 

.container { 
    text-align: center; 
    display: inline-block; 
    border: 2px solid #FFF; 
    background:rgba(0,0,0,0.5); 
    width:180px; 
    margin-left:10px; 
    margin-right:10px; 
    padding-top:20px; 
    margin-top:95px; 
} 

.container:hover { 
    border:2px solid #CCC; 
    color:#0F0; 
} 

.slider-viewport { 
    position: relative; 
    overflow: hidden; 
    width: 90%; 
    margin: 50px auto; 
    height: 20px; 
} 

.slider-carriage { 
    position: absolute; 
    width: 200%; 
} 

.show { 
    float: left; 
    text-align: center; 
    background: #F90; 
    width: 50%; 
} 

.show > span { 
    display: block; 
    border: 2px solid #FFF; 
}