Как сделать переход кнопки из центра вправо и наоборот - PullRequest
Новая
       57

Как сделать переход кнопки из центра вправо и наоборот

0 голосов
/ 14 марта 2019

Я пытаюсь создать сайт калькулятора, где сначала размещаются входные данные, а затем один нажимает большую вычислительную кнопку с горизонтальным центром.Я искал коды и реализовал один.

/**********Then at the head of the page, I placed this in the document.ready part:

     Toggle Results **********/
$('.nav-toggle').click(function() {
  //get collapse content selector
  var collapse_content_selector = $(this).attr('href');

  //make the collapse content to be shown or hide
  var toggle_switch = $(this);
  $(collapse_content_selector).slideToggle("slow", function() {
    if ($(this).css('display') == 'none') {
      toggle_switch.html("Change Inputs"); //change the button label to be 'Change Inputs'
      $("#divResults").toggle("slow");
      /*toggle_switch.css({
      	"left":"50%",
      	"transform":"translateX(-50%)"
      });*/
      toggle_switch.switchClass("btnHideInputs", "btnShowInputs");
    } else {
      toggle_switch.html("Compute"); //change the button label to be 'Compute'
      $("#divResults").toggle("slow");
      /*toggle_switch.css({
      	"left":"78%",
      	"transform":"translateX(0%)"
      });*/
      toggle_switch.switchClass("btnShowInputs", "btnHideInputs");
    }
  });
});
/********** Toggle Results **********/
/********** I've used the following styles on the Compute button:

    Compute Button **********/

div.divDefault {
  text-align: center
}

div.divShowInputs {
  text-align: right
}

div#divCTACompute button:active {
  border: none;
}

div#divCTACompute button.btnDefault {
  background-color: #3c99ea;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-size: 2.5em;
  margin: 30px auto;
  min-width: 300px;
  padding: 20px 0px;
  position: relative;
  /*	left: 50%; */
  text-align: center;
  width: 40%;
}

div#divCTACompute button.btnShowInputs {
  animation: move-in-steps 2s forwards;
  background-color: #3c99ea;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-size: 1em;
  margin: 10px auto;
  min-width: 200px;
  padding: 10px 0px;
  position: relative;
  /*	left: 78%; */
  text-align: center;
  width: 20%;
}

div#divCTACompute button.btnHideInputs {
  animation: move-in-steps 2s forwards reverse;
  background-color: #3c99ea;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-size: 2.5em;
  margin: 30px auto;
  min-width: 300px;
  padding: 20px 0px;
  position: relative;
  /*	left: 50%; */
  text-align: center;
  width: 40%;
}

.move-me-forward {
  animation: move-in-steps 1s forwards;
}

.move-me-back {
  animation: move-back-steps 1s forwards;
}

@keyframes move-in-steps {
  0% {
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    left: 78%;
    transform: translateX(0%);
  }
}

@keyframes move-back-steps {
  0% {
    left: 78%;
    transform: translateX(0%);
  }
  100% {
    left: 50%;
    transform: translateX(-50%);
  }
}

/********** /Compute Button **********/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- For the Compute button, this is the HTML:

    Compute button -->
<div class="container" id="divCTACompute">
  <button href="#divInputs" class="nav-toggle btnDefault">Compute</button>
</div>
<!-- /Compute button -->

Эффект, к которому я стремился, заключался в том, что когда я нажимал на кнопку вычисления, он скрывал бы div, который имеет входы,покажите div, у которого есть результаты, затем он уменьшится в размере и перейдет вправо.Это также изменило бы его функцию.

Когда оно справа и щелкнуло, оно должно вернуться в центр, стать больше, изменить свою функцию обратно на Compute, показать div с Inputs и скрыть divс результатами.

Я в основном смог их сделать, но у меня проблемы с переключением кнопок слева направо и наоборот.Он хорошо работает только с первой попытки, а затем полностью сходит с ума в последующих.

Кроме того, если это еще не очевидно, я полностью новичок в этом, поэтому вы увидите многокодов, закомментированных.Я пробовал много вещей, чтобы сделать это правильно, и я не могу сделать это: (

Пожалуйста, помогите: (

...