Question

理想情况下，我希望Windows 7样式最小化div然后恢复。我想要一个方法，字面上取div，收缩并将其移动到屏幕的左下角，然后可以单击以将其恢复到中心。请帮忙！这是我的jsfiddle，用于使用按钮移动div的基本操作：

var clicked = 0; 
var restored = 0;
$("#go").click(function () {
if ($(".box" + clicked)) {
    $(".box" + clicked).animate({
        top: 400,
        width: "20px;",
        height: "20px;",
        opacity: 0.4,
    });
    clicked++;
} else {
    clicked = 0;
}

});
$('#go2').click(function () {
if ($(".box" + restored)) {
    $(".box" + restored).animate({
        top: -20,
        width: "140px;",
        height: "140px;",
        opacity: 1,
    });
    restored++;
} else {
    restored = 0;
}

});

Answer 1

http://jsfiddle.net/UqWC6/2/

我删除了不正确的分号。 并链接到小提琴中的jqueryUI。

所以从

改变了这些行

    width: "20px;",
    height: "20px;",


    width: "140px;",
    height: "140px;",

到此

    width: "20px",
    height: "20px",


    width: "140px",
    height: "140px",

现在似乎工作得很好。如果那就是你想要的，请告诉我。

编辑：http://jsfiddle.net/UqWC6/3/我修复了它，所以第三个只需要一次点击，而不是两次。

我改变了你的html

<p>
    <button id="go">Save »</button>
    <button id="go2">Restore Next</button>
</p>
<div class="box0">box 1</div>
<div class="box1">box 2</div>
<div class="box3">box 2</div>

到此

<p>
    <button id="go">Save »</button>
    <button id="go1">Restore Next</button>
</p>
<div class="box0">box 1</div>
<div class="box1">box 2</div>
<div class="box2">box 3</div>

并从

更改了此脚本行

$('#go2').click(function () {

到此

$('#go1').on('click', function () {

编辑http://jsfiddle.net/UqWC6/4/我这样做是为了让点击次数达到3次后可以继续循环点击（将其重置为0）

加入

if (clicked === 3) {
   clicked = 0;
}

if (restored === 3) {
   restored = 0;
}

缩小div然后单击恢复它们

1 个答案: