2011-12-06 32 views
1

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

看到jsfiddle code here

我試過如下:

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

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

也許你們有一個想法,我怎麼能使這個順利,使div對象留在一行?!

回答

6

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

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

另外請注意,你不應該放置diva標籤內。

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; 
} 
+1

+1太糟糕了,我不能提供更多的,真棒! – ComputerSaysNo

+0

我同意,多麼巧妙的解決方案。還要感謝與''的提示,我一直在忘記這一點。非常感謝你! – Anonymous

+1

@DininDuminica非常感謝! :d – Yoshi