Изменить Javascript вместо наведения на установленное время - PullRequest
Новая
       79

Изменить Javascript вместо наведения на установленное время

0 голосов
/ 19 октября 2019

Я нашел эту анимацию в Интернете, и мне было интересно: как я могу изменить javascript, который вместо зависания над изображением вызовет переворот, установленное время? Например, через 3 секунды анимация запустится.

Я пока не очень хорошо разбираюсь в javascript и надеюсь, что кто-нибудь мне поможет

Большое спасибо, если вы знаете решение! 

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})
h1 {
  text-align: center;
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.card .front p {
  margin-top: 100px;
}
*/
.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

Ответы [ 3 ]

1 голос
/ 19 октября 2019

Во-первых, это не просто JavaScript, а JQuery. Если вы хотите, чтобы анимация начиналась с задержкой с использованием кода jquery, вы можете добавить setTimeout. А если вы используете функцию обратного вызова метода hover, используйте класс add / remove, а не toggle.

Вы можете сделать это несколькими способами, даже используя только CSS и анимацию. 

$(document).ready(function() {
  $(".container").hover(function() {
  setTimeout(() => { $(".card").addClass('flipped')},3000)
   
  }, function() {
    $(".card").removeClass('flipped')
  });
})
h1 {
  text-align: center;
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.card .front p {
  margin-top: 100px;
}
*/
.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>
1 голос
/ 19 октября 2019

Почему бы не сделать это с помощью CSS?

При псевдоклассе при наведении курсора с переходом : 

h1 {
  text-align: center;
}

.container {
  --card-transition-duration: 1s;
  --card-transition-delay: 4s;
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
  transform-style: preserve-3d;
  transform-origin: right center;
}

.container:hover .card {
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

Или с помощью @ анимации ключевых кадров : 

h1 {
  text-align: center;
}

.container {
  --card-transition-duration: 1s;
  --card-transition-delay: 4s;
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
  transform-style: preserve-3d;
  transform-origin: right center;
  animation-name: flip;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes flip {
  0% {
    transform: translateX( 0%) rotateY( 0deg);
  }
  35% {
    transform: translateX( 0%) rotateY( 0deg);
  }
  65% {
    transform: translateX( -100%) rotateY( -180deg);
  }
  100% {
    transform: translateX( -100%) rotateY( -180deg);
  }
}
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>
0 голосов
/ 19 октября 2019

Измените функцию готовности на приведенную ниже. 

  $(document).ready(function () {
      window.setInterval(function () {
           $(".card").toggleClass("flipped");
      }, 3000);
   });
...