jQuery 中的按钮转换

Question

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

1) jQuery 甚至可以实现我的建议吗？我知道您可以移动物品，但是可以同时 move/fade 移出吗？并将一个按钮（发送）移动到另一个按钮（下载所在的位置）的位置？我正在阅读 http://api.jquery.com/animate/ 并且您似乎只能通过指定向左移动多少像素（例如）而不是 "move to where this element is"。

2）假设可以做到，会不会好看。我正在尝试想出一种从原来的 3 个选项过渡到仅发送选项的好方法 - 在一行中。原来的顺序必须是Download/Send/Delete。因此，如果有人能想到更好的选择，我会洗耳恭听。

谢谢

Answer 1

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

$("#send").click(function() {
  transformation();
});

$("#ok").click(function() {
  //YOUR CODE FOR SAVE OR WHATEVER...
  reverseTransformation();
});
$("#cancel").click(function() {
  reverseTransformation();
});

function transformation() {
  $("#send").attr("disabled", true);
  $("#download").fadeOut(400);
  $("#delete").fadeOut(400);
  setTimeout(function() {
    $("#textInput").fadeIn();
    $("#ok").fadeIn();
    $("#cancel").fadeIn();
  }, 550);

}

function reverseTransformation() {
  $("#send").attr("disabled", false);
  var input = $("#textInput");
  input.val("");
  input.fadeOut(400);
  $("#ok").fadeOut(400);
  $("#cancel").fadeOut(400);
  setTimeout(function() {
    $("#download").fadeIn();
    $("#delete").fadeIn();
  }, 550);
}

.container {
  padding: 20px;
}
button {
  padding: 5px;
  margin: 2px;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="download" class="">Download</button>
  <button id="send" class="">Send</button>
  <input type="text" id="textInput" class="hidden" />
  <button id="delete" class="">Delete</button>
  <button id="ok" class="hidden">Ok</button>
  <button id="cancel" class="hidden">Cancel</button>
</div>

好看吗？这完全取决于你。
如果您有任何问题，请不要害怕提问。

Answer 2

是的，你可以很顺利地做到这一点。您可以使用 jQuery 的 .animate() or by using CSS classes and transitions 来实现。我在示例中选择了后者：

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

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

在 CSS 中，我使用 .clicked class 来指示应该显示或不显示的内容。我也在使用 position: absolute;，所以我可以轻松地为我的 left 位置设置动画：

.container{
    position: relative;
    overflow: hidden;
}
#buttons1{
    position: absolute;
    left: 0;
    -webkit-transition: left 0.5s ease;
    transition: left 0.5s ease;
}
.clicked #buttons1{
    left: -77px;
}
#download, #delete{
    opacity: 1;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.clicked #download, .clicked #delete{
    opacity: 0;
}
#buttons2{
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: -1; 
    /* We use the z-index here to make sure the input field and buttons are 
    clickable and not obstructed by the invisible "delete" button on top of it */
}
#buttons2.appear{
    opacity: 1;
    z-index: 1;
}

而在 jQuery 中，当单击按钮时，我只是在 class 之间 toggle：

$("#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);
});

JSFiddle demo

jQuery 中的按钮转换

Button transition in jQuery

jquery

animation