如何使用jQuery通過滑動效果從左側刪除舊的div並從右側添加新的div？

Question

因此，在嘗試了3個小時左右的不同操作后，我最終決定在StackOverFlow上發布一個問題。 這是問題所在：

在單擊“下一步”按鈕時，我想通過將其向左滑動來刪除舊的div，並通過向右滑動來添加動態創建的div。

到目前為止，我只能通過在淡入淡出時將其向左滑動來創建去除效果。 但是我無法從右側添加一個新的div。 我將如何完成？

這是html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Website Google Project</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="bootstrap-2.3.6-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript" src="js/secret_api.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="shortcut icon" type="image/ico" href="photos/favIcon.png">
  </head>
  <body>
    <h1 class="text-center">All Your Directions In One Spot</h1>
    <div class="container">
      <div class="row row-content" id="tempDiv">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
          <div class="text-center">
            <h2>From:</h2>
          </div>
        </div>
        <div style="padding: 20px 20px"></div>
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
          <div>
            <input id="origin" type="text" class="form-control input-lg" placeholder="Origin" value="8844 N Wisner St">
          </div>
        </div>
        <div style="padding: 40px 40px"></div>
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
          <div class="row row-content">
            <div class="text-center">
              <div class="col-xs-12 col-sm-3 col-sm-offset-3">
                <button class ="btn btn-lg" id="next">Next</button>
              </div>
              <div class="col-xs-12 col-sm-3">
                <button class="btn btn-lg" id="done">Done</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="padding: 40px 40px"></div>
      <div id="listDirections">

      </div>
    </div>
    <script src="js/scripts.js"></script>
  </body>
</html>

這是CSS：

body {
    background-color: #2b669a;
}

h1 {
    color: white;
    font-size: 3em;
}

button {
    background-color: #204056;
    color: white;
    font-weight: bold;
}

button:hover,
button:focus {
    color: lightgray !important;
}

.directions {
    background-color: whitesmoke;
    color: #5A5A5A;
    padding: 20px 20px;
    font-size: 1.5em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.glyphicon-plus {
    font-size: 2em;
    color: white;
    padding: 5px 5px;
}

.glyphicon-plus:hover {
    color: coral;
    cursor: pointer;
}

這是JavaScript：

function getDirections(json) {
    "use strict";
    var steps = json.routes[0].legs[0].steps;
    var directions = [];
    var counter = 1;

    steps.forEach(function (step) {
        directions.push(counter + ". " + step.html_instructions);
        counter += 1;
    });

    // Separates the 2 conjoint words in the last line.
    // so "Ave Destination" instead of "AveDestination"
    directions[directions.length - 1] = directions[directions.length - 1].replace(/([a-z])([A-Z])/g, "$1 $2");
    return directions;
}

/**
 * Takes in the Google Maps API JSON object as input and returns the ETA as a string.
 * @param {Object} json
 * @return {string}
 */
function getEta(json) {
    "use strict";
    return json.routes[0].legs[0].duration.text;
}

function showDirections(json) {
    "use strict";
    // creates div, adds class, and appends the div
    var div = document.createElement("div");
    $(div).addClass("directions col-xs-12 col-sm-8 col-sm-offset-2");
    $(div).append("<b>FROM: </b> " + $("#origin").val() + "<br>");
    $(div).append("<b>TO: </b>" + $("#destination").val() + "<br>");
    $(div).append("<em>It will take you " + getEta(json) + " to get there.</em> <p></p>");
    getDirections(json).forEach(function (item) {
       $(div).append("<p>" + item + "</p>");
    });
    $("#listDirections").append(div);
}

$('#next').click(function() {
    $('#tempDiv').animate({
        opacity: 0, // animate slideUp
        marginLeft: '-100%',
        marginRight: '100%'
    }, 'fast', 'linear', function() {
        $(this).remove();
    });
    $('.container').append($("#origin"));
});
/*
$("#next").click(function() {
    // $('#tempDiv').hide('slide', {direction: 'left'}, 500).fadeOut('fast');
    $('#next').show('slide', {direction: 'left'}, 500);
});
*/

$(document).ready(function () {
    "use strict";

    $("#getButton").click(function () {

        // Get the user input
        var origin = $('#origin').val().replace(/ /g, "%20");
        var destination = $('#destination').val().replace(/ /g, "%20");

        // Create the URL
        var URL = "https://maps.googleapis.com/maps/api/directions/json?origin=" +
            "" + origin + "&destination=" + destination + "&key=" + APIKEY;

        // Obtain json object through GET request
        $.getJSON(URL, function (json) {
            console.log(getEta(json));
            console.log(getDirections(json));
            showDirections(json);
        });
    });
});

Answer 1

如果我已經很好地理解了您的問題，那么您想要刪除一個動畫“老div”，使其在左側，然后，您想要創建一個“新div”，將其從右側進行動畫。 這段代碼將幫助您完成該任務（代碼中的注釋將幫助您理解它）：

HTML代碼：

<button id="btn">Create</button>
<div id="container"></div>

JavaScript代碼：

var sum = 1;

//---Function to create divs to animate
function createDiv() {

  //---Disable button
  active(false);

  //---Access to the slide div
  var slide = $("#container .slide");

  //---If slide exists
  if (slide.length > 0) {

    //---Dissapear the slide to the left
    slide.animate({

      "opacity": 0,
      "right": "100%"

    }, function() {

      //---Delete slide
      $(this).remove();

      //---Create new slide
      var slide = create();

      //---Appear slide from the right
      appearSlide(slide);

    });

    //---If the slide no exists
  } else {

    //---Create slide
    var slide = create();

    //---Appear slide from the right
    appearSlide(slide);

  }

}

//---Create slide function
function create() {

  var slide = $("<div/>");
  slide.addClass("slide");
  slide.text("div " + sum);

  $("#container").append(slide);

  sum++;

  return slide;

}

//---Appear slide from the right function
function appearSlide(slide) {

  slide.animate({

    "opacity": 1,
    "right": "0"

  }, function() {

    //---Enable button
    active(true);

  });

}

//---Enable / disable button function
function active(state) {

  $("#btn").prop("disabled", !state);

}

//---Create a div by default
createDiv();

//---Create a alide when press the button
$("#btn").on("click", createDiv);

jsfiddle

如何使用jQuery通過滑動效果從左側刪除舊的div並從右側添加新的div？

問題描述

1 個解決方案

解決方案1
1 2016-01-07 10:22:32

如何使用jQuery通過滑動效果從左側刪除舊的div並從右側添加新的div？

問題描述

1 個解決方案

解決方案1 1 2016-01-07 10:22:32

解決方案1
1 2016-01-07 10:22:32