jQueryを使って2つのオブジェクトを左右に1行スライドさせる

Question

コンテンツを左から右にスライドさせる小さな機能があります。残念ながら、そのサイズのために2つのdivオブジェクト（）は、スライドするときに隣り合って並んでいませんが、そのうちの1つは明らかに常に他のものの下にあります。

jsfiddle code here

は、私は次のことを試してみました参照してください：float:leftを設定

• は助けただけでなく、スライド時に、いくつかの予期しない動作を作成した、divの絶対すべて
• ポジショニングで助けにはなりませんでした右から左へ（自分で試してみてください）
• アニメーションの遅延/キューイングは、実際には動作しますが、遅くて使いやすいものではありません。

また、オブジェクトをすべて中央に配置したい場合は、浮動小数点と異なる配置はあまり役に立ちませんので、とにかく別のソリューションを使用することをお勧めします。

多分、私はこれを滑らかにすることができたので、divのオブジェクトは1行にとどまります。

Answer 1

は、多くの変更を行ったことについて申し訳ありませんが、これを試してみてください。

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

また、あなたがaタグ内divを置くべきではないことに注意します。

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

ここで少し更新ウィンドウのサイズを変更しても問題

0にならないように

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