Question

我正在使用＆＃39;切换＆＃39;幻灯片效果，并希望显示用户可以单击以显示整个div的div的一部分。我现在的解决方案的问题是#click_here在切换＆＃39;时切换到了左右。被触发了。我想找到一个解决方案，其中#click_here随着幻灯片动画从左向右逐渐移动时切换＆＃39;被触发了。

到目前为止我的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/

谢谢！

Answer 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)

编辑：

另一种方法是使用let 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切换“show”类：

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

请注意 browser compatibility of CSS transitions。

WORKING EXAMPLE (jsfiddle)

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

1 个答案:

编辑：