显示切换 div 的一部分，然后单击部分以显示整个 div答案

【问题标题】：Show portion of toggle div, then click on portion to reveal entire div显示切换 div 的一部分，然后单击部分以显示整个 div
【发布时间】：2014-04-26 03:32:28
【问题描述】：

我正在使用“切换”幻灯片效果，并希望显示 div 的一部分，用户可以单击该部分来显示整个 div。我现在的解决方案的问题是#click_here 在触发“切换”时从左向右跳转。我想找到一个解决方案，当触发“切换”时，#click_here 随着幻灯片动画从左到右逐渐移动。

到目前为止，这是我的 jQuery 脚本：

$('#click_here').click(function() {
var effect = 'slide';
var options = { direction: 'left' };
var duration = 700;
$('#info_box').toggle(effect, options, duration);
     return false;
});

这是我的html

<div id="wrap">
    <div id="click_here">
        <p>Click here!</p>
    </div>
    <div id="info_box">
        <h1>Here is some cool info!</h1>
    </div>
</div>

和css

#wrap { background:gray; width:400px; margin:0 auto; height:300px; border:5px blue solid; }

#info_box { width:300px; height:200px; background:pink; float:left; display:inline-block;  overflow:hidden; display:none; }

#click_here { width:100px; height:200px; float:left; background:yellow; display:inline-block; }

http://jsfiddle.net/NinoLopezWeb/92Xcm/1/

谢谢！

【问题讨论】：

你能切换div吗？这样它会从点击这里jsfiddle.net/enXVM下方滑动
刚刚看到这个非常相似的问题和有趣的答案：stackoverflow.com/questions/10092794/…

标签： jquery

【解决方案1】：

似乎 jQuery UI 滑动切换的工作方式是在元素周围插入一个包装器并为元素的 left 位置设置动画。但是，包装器占据了最终元素的整个宽度，因此您的“单击按钮”会立即向右移动。（有关解决方法，请参阅 this SO post。）

您可以使用 jQuery 的 animate() 来为 CSS 边距设置动画，而不是使用该切换效果。

#wrap {
    ...
    overflow:hidden;     /* hide overflowing content */
}

#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;      /* move the element out of sight
}

然后使用您的点击处理程序将margin-left 动画化回“0px”：

$('#click_here').click(function () {
    var duration = 700;
    $('#info_box').animate({
        'margin-left':'0px'
    },duration);
    return false;
});

WORKING EXAMPLE (jsfiddle)

编辑：

另一种方法是让 CSS 处理动画，然后使用 jQuery 切换一个类：

#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;

    -webkit-transition-duration:.7s;
    -moz-transition-duration:.7s;
    -ms-transition-duration:.7s;
    -o-transition-duration:.7s;
    transition-duration:.7s;
}

#info_box.show {
    margin-left:0px;
}

然后只需使用 jQuery 切换“显示”类：

$('#click_here').click(function () {
    $('#info_box').toggleClass('show');
    return false;
});

请注意 browser compatibility of CSS transitions。

WORKING EXAMPLE (jsfiddle)

【讨论】：