Используйте .animate () с переключателем if / else?

Question

Я пытаюсь сделать так, чтобы обертка .wrapper двигалась вот так.

.powrapper - клик один раз: .wrapper { left: -100vw }

.powrapper снова нажмите: .wrapper { left: 0vw }

У меня сейчас есть код jQuery:

$('.powrapper').click(function() {
  if ( $('.timerwrapper:visible').length ) {
    $('.button').html('<span>&nbsp;</span>Cooldown<span>&nbsp;</span>');
    $('.wrapper').animate({"left": "-100vw"}, 1000);
  } 
  else {
    $('.button').html('Pre<span>-</span>Order');
    $('.wrapper').animate({"left": "0vw"}, 1000);
  }
});

(Это в основном .toggle ())

Единственная проблема с этим:

Когда я нажимаю один раз: .wrapper { left: -100vw } Когда я нажимаю снова: .wrapper { left: -100vw }

Ничего не происходит.

https://codepen.io/TigerYT/full/XwoRpa

Answer 1

если вы регистрируете $('.timerwrapper:visible').length, это каждый раз 1, так что больше никогда не будет выполняться блок.

Простое решение определяется глобально (под countDownDate):

var countDownDate = new Date("Jun 5, 2019 15:00:00").getTime();
var t = true;

затем переключитесь таким образом:

if ( t ) {
console.log($('.timerwrapper:visible').length )
$('.button').html('<span>&nbsp;</span>Cooldown<span>&nbsp;</span>');
$('.wrapper').animate({"left": "-100vw"}, 1000).dequeue();
t=false;
} 
else {
 $('.button').html('Pre<span>-</span>Order');
 $('.wrapper').animate({"left": ""}, 1000).dequeue();
 t=true;
}

Вы можете проверить это здесь:

https://codepen.io/anon/pen/mYvMNL?editors=0010

Answer 2

исправил ваш код: ошибка при изменении кнопки HTML!

var countDownDate = new Date("Jun 5, 2019 15:00:00").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();
    
  var distance = countDownDate - now;
    
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  $('.days > span').html(days);
  $('.hours > span').html(hours);
  $('.minutes > span').html(minutes);
  $('.seconds > span').html(seconds);
    
  if (distance < 0) {
    clearInterval(x);
    document.getElementByClassName("timer").innerHTML = "The release is here!";
  }
}, 1000);

$('.powrapper').click(function() {
  if ( $(".wrapper").css("left")==="0px") {
    $('.button').html('<span>&nbsp;</span>Cooldown<span>&nbsp;</span>');
    $('.wrapper').animate({"left": "-100vw"}, 1000).dequeue();
  } 
  else {
        $('.button').html('<span>&nbsp;</span>Pre-order<span>&nbsp;</span>');
    $('.wrapper').animate({"left": "0"}, 1000).dequeue();
  }
});

body {
  margin: 0;
  background-color: #F7F7F7;
  background-image: url('https://image.freepik.com/free-photo/white-wooden-textures_74190-6906.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  overflow-x: hidden;
  font-family: Rubik;
  color: white;
  width: 100vw;
  height: 100vh;
}

.wrapper {
  display: inline-flex;
  position: relative;
  left: 0vw;
}

/* Header */

.header {
  background: url('https://cdn.discordapp.com/attachments/209232737184251904/584295836041871370/Monthly-Website-Header-background.jpg');
  background-size: 100vw 26.9012vw;
  width: 100vw;
  height: 26.9012vw;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
  margin-bottom: 7.5vh;
}

.title {
  font-weight: 100;
  font-size: 8.471vw;
  padding-top: 1.882vw;
  text-transform: uppercase;
  text-align: center;
}

span {
  font-family: Poppins;
}

.powrapper {
  border: 0.353vw solid #fff;
  border-radius: 0.588vw;
  padding: 0.353vw;
  width: 15.059vw;
  margin-top: 1.882vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.button {
  background: rgba(255,255,255,0.25);
  width: inherit;
  height: inherit;
  padding: 0.588vw 0;
  color: #fff;
  transition: color 1s, background 1s, font-weight 1s, z-index 1s;
  text-align: center;
  border-radius: 0.353vw;
}

/* Timer */

.timerwrapper {
  margin-top: 26.9012vw;
  margin: 6.3618vw 4.026vw;
  border: 0.353vw solid #fff;
  border-radius: 0.588vw;
  padding: 0.474vw;
  width: 90vw;
  height: 35vh;
  text-align: center;
}

.timer {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
}

.time {
  display: inline-block;
  width: 27.5vh;
  height: 27.5vh;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 1.979vw;
  background-size: 27.5vh 26vh;
  background-position: center;
  background-repeat: no-repeat;
}

.time > span {
  position: relative;
  top: 12.5vh;
  font-size: 6vh;
}

.days {
  background-image: url('https://cdn.discordapp.com/attachments/209232737184251904/584356594347802650/blue_-_Copy.png');
}

.hours {
  background-image: url('https://cdn.discordapp.com/attachments/209232737184251904/584356594347802650/blue_-_Copy.png');
}

.minutes {
  background-image: url('https://cdn.discordapp.com/attachments/209232737184251904/584356594347802650/blue_-_Copy.png');
}

.seconds {
  background-image: url('https://cdn.discordapp.com/attachments/209232737184251904/584356594347802650/blue_-_Copy.png');
}

@media only screen and (max-width: 835px) and (min-width: 593px) {
  .time {
    background-size: 17.3vh 16.1vh;
    background-position: center;
    background-repeat: no-repeat;
    width: 17.3vw;
    height: 17.3vw;
    line-height: 4.3vw;
    font-size: 1.386vw;
  }

  .time > span {
    top: 7.5vw;
    font-size: 3.686vw;
  }
}

/* Pre-Order */

.preorderwrapper {
  margin-top: 26.9012vw;
  margin: 6.3618vw 4.026vw;
  border: 0.353vw solid #fff;
  border-radius: 0.588vw;
  padding: 0.474vw;
  width: 90vw;
  height: 35vh;
  text-align: center;
}

.preorder {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <div class="title">A<span>ntiqu</div>
  <div class="powrapper">
    <div class="button">Pre<span>-</span>Order</div>
  </div>
</div>
<div class="wrapper">
  <div class="timerwrapper">
    <div class="timer">
      <div class="time days">&nbsp;<span>0</span><br>&nbsp;Days</div>
      <div class="time hours">&nbsp;<span>0</span><br>&nbsp;Hours</div>
      <div class="time minutes">&nbsp;<span>0</span><br>&nbsp;Minutes</div>
      <div class="time seconds">&nbsp;<span>0</span><br>&nbsp;Seconds</div>
    </div>
  </div>
  <div class="preorderwrapper">
    <div class="preorder">
      few
    </div>
  </div>
</div>

Answer 3

Условие, которое вы проверяете, всегда возвращает 0

$('.timerwrapper:visible').length 

Итак, я просто добавил класс custom-hidden, который переключается, когда таймер-обертка скрыт и удаляется, когда он возвращается в кадр, ядобавлена ​​проверка на основе дополнительного класса.Я использовал hasClass, addClass, removeClass, чтобы добавить, удалить и проверить, доступен ли пользовательский класс.

Пожалуйста, ознакомьтесь с рабочей демонстрацией пера здесь.

https://codepen.io/anon/pen/JqxrXJ