div 滑动打开然后关闭答案

【问题标题】：div slide open then closediv 滑动打开然后关闭
【发布时间】：2012-10-19 07:11:25
【问题描述】：

我有一个两个盒子，第一个盒子有一个 "Open" <button>

<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>

当点击“打开”<button>第一个框会向左滑动50%，然后更改“打开” 到 “关闭” 按钮。我想出了这个 jQuery 解决方案：

$(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#close').on('click', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            // alert('done');
        });
    });
});

我设法更改了ID 和<button> 的文本（通过检查元素检查）。但是，当我单击 "Close" <button> 时，它不起作用。这里似乎有什么问题？我什至在$('#close') 上尝试了alert(1)，看看它是否确实看到了关闭 ID，但没有运气。

jsFiddle here.

【问题讨论】：

由于声誉不佳，我的帐户似乎很难回答。但是，如果我认为合适并回答了我的问题，我会标记答案。
Bruv，大家都是来帮你的，和声望无关，我有+1-ed你，剩下的看我下面的帖子，希望能帮到你:)

标签： jquery html jquery-animate

【解决方案1】：

如果你改变你的

$('#close').on('click', function(){...});

到这里

$('#box1').on('click', '#close', function(){...});

那么这将像 this demo 一样工作，但您也可以使其以其他方式工作，例如 this demo。

【讨论】：

谢谢你，但是我很难看这些函数/类。我现在更喜欢简单的方法。

【解决方案2】：

Working Demo

另一个演示感谢@Sheikh：DEMO

希望它适合您的事业:)

代码

   $(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $(document).on('click', '#close', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            alert('done');
        });
    });
});

【讨论】：

感谢 Bruver @SheikhHeera :) 编辑！
谢谢并再次检查您的demo 并尝试多次单击close 按钮。
Cheerios @SheikhHeera :) jsfiddle.net/TXyUM +1 给了你，而且应该记住 :) 添加 $(document).on('click', '#close', function() {...});
虽然这似乎解决了我的问题，但在关闭动画之前点击关闭后会有某种延迟。

【解决方案3】：

您需要使用live()。

同时制作近距离动画right: '20%'

工作jsFiddle

【讨论】：

它的小错误，只是一个建议，.live 已被 Jquery 弃用 - 如果 Keen 阅读此内容 - :) stackoverflow.com/questions/11115864/… 也看看代表，但我认为 OP 的主要问题是其他问题 :) 我想我会提到它作为仅供参考的 bruv。

【解决方案4】：

尝试使用toggle而不改变它的ID demo

$('#open').toggle(function() {
    $('#box1').animate({
        right: '50%'
    }, 500, function() {
        $('#open').text('Close');
    });
}, function(){
    $('#box1').animate({
        right: '20%'
    }, 500, function() {
        $('#open').text('Open');
    });
});

【讨论】：

【解决方案5】：

我在 Google 上搜索弹出式底部滑动框时遇到了这个问题。

我已经修改了上面的代码并创建了一个底部滑块，它会显示一个 iframe，如果您想显示有关页面的快速调查，这是完美的选择。

演示：http://jsfiddle.net/redwall/r5FBm/3/

HTML：

<div id="box1">
<button id="open" type="button">Open</button>
<br />
<br />
<br />
<iframe src="http://www.example.com" width="100%" height="170" frameborder="0" scrolling="no">
    <p>Your browser does not support iframes.</p>
</iframe>

JAVA：

$(function () {
$('#open').on('click', function () {
    $('#box1').animate({
        height: '230px'
    }, 500, function () {
        $('#open').text('Close').attr('id', 'close');
    });
});

$('#box1').on('click', '#close', function () {
    $('#box1').animate({
        height: '50px'
    }, 500, function () {
        $('#close').text('Open').attr('id', 'open');
    });
});

});

CSS：

    #box1 {
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
    background:#FF800D;
    overflow:hidden;
}
button {
    position:absolute;
    right:0;
}

【讨论】：