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

Question

我有一个小功能,可以通过滑动效果从左到右切换我的内容.不幸的是,由于它们的大小而导致的两个div物体inline-block在滑动时不会彼此对齐,但是其中一个物体显然总是在另一个物体之下.

请在此处查看jsfiddle代码

我尝试了以下方法:

• 设置一个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;
}