Question

2个问题......对于某些情况，这是情景。我的页面上有三个按钮，如下：

enter image description here

1）我甚至可以用jQuery提出建议吗？我知道你可以移动物品，但是可以同时移动/淡出吗？并将按钮（发送）移动到另一个按钮的位置（下载的位置）？我正在阅读http://api.jquery.com/animate/，看起来你只能通过指定左边的像素数来移动（例如），而不是“移动到这个元素的位置”。

2）假设可以做到，它看起来会不错。我试图想出一个很好的方法，从原来的3个选项转换到只有发送选项 - 在一行。原始订单必须是下载/发送/删除。因此，如果有人能想到更好的选择，我就会全力以赴。

由于

Answer 1

是的，你可以顺利地做到这一点。您可以使用jQuery＆＃39; .animate()或使用CSS类和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类来指示应该可见的内容。我还使用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中，当单击一个按钮时，我只需在类之间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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

看起来不错吗？那完全取决于你。
如果您有任何疑问，请不要害怕。

jQuery中的按钮转换

2 个答案: