jquery - 让 jQuery 在一行中向左+向右滑动 2 个对象

Question

我有一个小功能，可以通过滑动效果从左到右切换我的内容。不幸的是，两个 div 对象(带有 inline-block)由于其大小，在滑动时不会彼此对齐，但其中一个显然总是在另一个的下方一。

请参阅jsfiddle code here

我尝试了以下方法:

• 设置 float:left 根本没有帮助
• 定位 div 的绝对位置，这有帮助，但在从右向左滑动时也会产生一些意外行为(您自己尝试一下)
• 延迟/排队动画，可以工作，但延迟对用户来说并不友好

我还想提一下，当您希望对象全部居中时， float 和不同的定位并不是很有帮助，所以无论如何我更喜欢另一种解决方案。

也许你们有一个想法，我如何才能使其顺利，以便 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;
}