jQuery中的按钮转换

2个问题。。。在某些情况下，情况就是这样。我的页面上有三个按钮，如下所示：

1） 我的建议在jQuery中是否可行？我知道您可以移动物品，但是否可以同时移动/淡出？以及将一个按钮（发送）移动到另一个按钮（下载位置）的位置？我正在阅读，似乎您只能通过指定左侧的像素数（例如）来移动，而不是“移动到此元素所在的位置”

2） 假设可以做到，它看起来会很好吗。我正试图想出一个很好的方法，从原来的3个选项过渡到只发送选项-在一行中。原始订单必须是下载/发送/删除。因此，如果有人能想出更好的选择，我洗耳恭听

---

谢谢

我想这就是你想要的
我刚才做了这个。它并不完美，但很有效。

$（“#发送”）。单击（函数（）{
转换（）；
});
$（“#确定”）。单击（函数（）{
//你的代码保存或任何。。。
反向翻译（）；
});
$（“#取消”）。单击（函数（）{
反向翻译（）；
});
函数转换（）{
$（“#发送”）.attr（“禁用”，真）；
$（“#下载”）。淡出（400）；
$（“#删除”）。淡出（400）；
setTimeout（函数（）{
$（“#textInput”）.fadeIn（）；
$（“#ok”）.fadeIn（）；
$（“#取消”）.fadeIn（）；
}, 550);
}
函数反向转换（）{
$（“#发送”）.attr（“禁用”，false）；
变量输入=$（“#文本输入”）；
输入.val（“”）；
输入衰减（400）；
美元（“#ok”）。淡出（400）；
美元（“#取消”）。淡出（400）；
setTimeout（函数（）{
$（“#下载”）.fadeIn（）；
$（“#删除”）.fadeIn（）；
}, 550);
}

.container{
填充：20px；
}
钮扣{
填充物：5px；
保证金：2倍；
}
.隐藏{
显示：无；
}

下载
邮寄
删去
好啊
取消

我想这就是你想要的
我刚才做了这个。它并不完美，但很有效。

$（“#发送”）。单击（函数（）{
转换（）；
});
$（“#确定”）。单击（函数（）{
//你的代码保存或任何。。。
反向翻译（）；
});
$（“#取消”）。单击（函数（）{
反向翻译（）；
});
函数转换（）{
$（“#发送”）.attr（“禁用”，真）；
$（“#下载”）。淡出（400）；
$（“#删除”）。淡出（400）；
setTimeout（函数（）{
$（“#textInput”）.fadeIn（）；
$（“#ok”）.fadeIn（）；
$（“#取消”）.fadeIn（）；
}, 550);
}
函数反向转换（）{
$（“#发送”）.attr（“禁用”，false）；
变量输入=$（“#文本输入”）；
输入.val（“”）；
输入衰减（400）；
美元（“#ok”）。淡出（400）；
美元（“#取消”）。淡出（400）；
setTimeout（函数（）{
$（“#下载”）.fadeIn（）；
$（“#删除”）.fadeIn（）；
}, 550);
}

.container{
填充：20px；
}
钮扣{
填充物：5px；
保证金：2倍；
}
.隐藏{
显示：无；
}

下载
邮寄
删去
好啊
取消

是的，您可以顺利完成。您可以使用jQuery或CSS类和。我在示例中选择了后者：

在HTML中，我根据两种可见状态对按钮进行了分组：

<div class="container">
    <div id="buttons1">
        <button id="download">Download</button>
        <button id="send">Send</button>
        <button id="delete">Delete</button>
    </div>
    <div id="buttons2">
        <input type="text" id="textInput"/>
        <button id="ok">Ok</button>
        <button id="cancel">Cancel</button>
    </div>
</div>

在jQuery中，单击按钮时，我只需在类之间切换：

$("#send").click(function(){
    $("#send").attr("disabled", true);
    $(".container").toggleClass("clicked");

    // Activate the second animation with a slight delay so it looks nicer
    setTimeout(function(){
        $("#buttons2").toggleClass("appear");
    }, 300);
});

$("#ok, #cancel").click(function(){
    $("#send").attr("disabled", false);
    $("#buttons2").toggleClass("appear");

    // Activate the second animation with a slight delay so it looks nicer
    setTimeout(function(){
        $(".container").toggleClass("clicked");
    }, 200);
});

---

是的，您可以顺利完成。您可以使用jQuery或CSS类和。我在示例中选择了后者：

在HTML中，我根据两种可见状态对按钮进行了分组：

<div class="container">
    <div id="buttons1">
        <button id="download">Download</button>
        <button id="send">Send</button>
        <button id="delete">Delete</button>
    </div>
    <div id="buttons2">
        <input type="text" id="textInput"/>
        <button id="ok">Ok</button>
        <button id="cancel">Cancel</button>
    </div>
</div>

在jQuery中，单击按钮时，我只需在类之间切换：

$("#send").click(function(){
    $("#send").attr("disabled", true);
    $(".container").toggleClass("clicked");

    // Activate the second animation with a slight delay so it looks nicer
    setTimeout(function(){
        $("#buttons2").toggleClass("appear");
    }, 300);
});

$("#ok, #cancel").click(function(){
    $("#send").attr("disabled", false);
    $("#buttons2").toggleClass("appear");

    // Activate the second animation with a slight delay so it looks nicer
    setTimeout(function(){
        $(".container").toggleClass("clicked");
    }, 200);
});

---

是的，这是可以顺利完成的。我可以在一个小时内写出一个答案，如果那时还没有人这样做的话。同时，你可能会发现这本书很有趣。那太好了，谢谢。我现在正在查看Codrops页面中类似的过渡文章。是的，这是可以顺利完成的。我可以在一个小时内写出一个答案，如果那时还没有人这样做的话。同时，你可能会发现这本书很有趣。那太好了，谢谢。我现在正在查看Codrops页面中类似的转换文章。我对它做了一些调整（使用jQuery来淡出CSS），但基本上这是完美的。非常感谢。我对它做了一些调整（使用jQuery来淡出CSS），但基本上这是完美的。非常感谢。谢谢你的回答。在这两个答案之间，我让它工作得很好，看起来很棒。我也用了你的一点（我用jQuery代替CSS做淡入淡出）。谢谢你的回答。在这两个答案之间，我让它工作得很好，看起来很棒。我也用了一些你的（我用jQuery代替CSS来做淡入淡出）。