Question

我有一个可拖动的div，我想通过点击信息链接打开/关闭它。是＃39; m使用Jquery UI draggable约束运动。这是我的Fiddle code

<div id="containment-wrapper">
    <div class="draggable ui-widget-content">
        <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
    </div>
</div>

Answer 1

您可以在加载时隐藏可拖动元素，并在点击信息链接时切换其可见性：

$("#draggable3").hide().draggable({
    containment: "#containment-wrapper",
    scroll: false
});
$("#draggable5").draggable({
    containment: "parent"
});
$("#showInfo").click(function(e){
    e.preventDefault();
    $("#draggable3").toggle();
});

更新了 jsFiddle

添加动画就像在toggle()函数中输入您希望它持续的毫秒数一样简单。例如toggle(500)。

您还可以使用fadeToggle()或slideToggle()使用其他类型的动画，同时指定毫秒数作为参数。

带有淡入淡出动画的

jsFiddle。

Answer 2

你也可以对它起作用：

$("#draggable3").hide().draggable({
    containment: "#containment-wrapper",
    scroll: false
});
$("#draggable5").draggable({
    containment: "parent"
});
$("#showInfo").click(function(e){
    e.preventDefault();
    if($("#draggable3").is(':visible'))
    $("#draggable3").hide(500);
    else
        $("#draggable3").show(500);
});

JQUERY UI draggable div

2 个答案: