jquery 如何在DIV之间滑动？

我想创建一个三张卡片，在点击时（旋转）彼此显示，并编写了以下代码：

$('.box1').click(function(){
    $('.box1').toggleClass('removeanimate');
    $(this).toggleClass('go');
    $('.box2').removeClass('go');
});

$('.box2').click(function(){
    $(this).toggleClass('go');
    $('.box3').removeClass('go')
});

$('.box3').click(function(){
    $(this).toggleClass('go');
    $('.box1').toggleClass('go');
    $('.box2').toggleClass('go');
});

.wrapper{
    position:static;
}

.box{
    width:200px;
    height:100px;
    position:absolute;
    margin:5px;
    cursor:pointer;
    overflow:hidden;
    text-align: center;
    line-height: 100px;
}

.box1 {
    z-index:2;
}
.box2{
    z-index:1;
}
.box3{
    z-index:0;
}

.go{
    height:0;
    width:0;
}

.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: orange;
}
.removeanimate: {
  transform: scale(0.7);
  transform-origin: left;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box box1"><h2>I'm block 1</h2></div>
    <div class="box box2"><h2>I'm block 2</h2></div>
    <div class="box box3"><h2>I'm block 3</h2></div>
</div>

我的问题是：

1-我想一些如何动画它们之间，但.removeanimate不工作aparently，我如何才能修复？
2-我觉得脚本部分是错误的，因为如果我想添加100框，我不能添加100 onclick功能（我可以，但它是奇怪的）和一个$(this).toggleClass('go');不工作，它禁用旋转的mixveor（重新开始后，最后一张卡）。我如何才能解决这个问题？

1 -要使用关键帧，你需要在你的关键帧css规则中设置动画，然后在一个带有animation-name属性的类中定义关键帧动画的名称。
https://www.w3schools.com/css/css3_animations.asp
2 -我的目的是让你用“card”类名循环你的元素，然后你用each() + index添加类名和z-index。
当你得到点击事件时，你需要使用正则表达式得到类名中的数字（例如：box 0），然后你得到你的下一个和第一个元素的数字（例如：box 1）。所以你可以添加你的关键帧动画的类，然后隐藏当前框并显示下一个。
我把我所有的代码都写下来了。

// get count of all box
var getNumberOfBox = $(".box").length;

// init for box
initBox(getNumberOfBox);

// get click event on box
$(".box").click(function() {
    // we check if current is animated
    if(!$(this).is(':animated')) {
      // fist you check if next box exist
      if ($(this).next("div.box:first").length) {
        // get the digit in class name (ex: box1)
        var boxNum = $(this).attr('class').match(/\d+$/)[0];
        // get the digit of next card
        var getNextBoxNum = $(this).next("div.box:first").attr('class').match(/\d+$/)[0];

        // we check if var are defined
        if (typeof boxNum !== "undefined" && typeof getNextBoxNum !== "undefined") {
          // lets add your keyframes animation class and use fadeOut callback on current box
          $(".box" + boxNum).addClass("removeanimate").fadeOut(700, function() {
            // remove keyframes class name of current element
            $(".box" + boxNum).removeClass("removeanimate");
            // then show next card
            $(".box" + getNextBoxNum).fadeIn();
          });
        }
      } else {
        // lets restart the loop
        $(".box:visible").fadeOut(250, function() {
          $(".box:first").fadeIn(250, function() {
            $(".box").removeClass("removeanimate").css("display", "block");
          });
        });
      }
    }
});

function initBox(boxCount) {
  // loop on all elements with "box" class name
  $(".box").each(function(index) {
    // add class name + z-index using each() and index of element
    $(this).addClass("box" + index).css("z-index", boxCount - index);
  });
}

.wrapper{
    position:static;
}

.box{
    background: #333;
    width:200px;
    height:100px;
    position:absolute;
    margin:5px;
    cursor:pointer;
    overflow:hidden;
    text-align: center;
    line-height: 100px;
}

.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: orange;
}
.box:nth-child(4) {
    background: purple;
}
.box:nth-child(5) {
    background: teal;
}

/* add keyframes name to a class with "animation-name" to use animation */
.removeanimate {
  animation-duration: 1s;
  animation-name: scaleAnim;
}

/* set your animation */
@keyframes scaleAnim {
  to {  
    transform: scale(0.7);
    transform-origin: left;
    background-color: pink;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box"><h2>I'm block 1</h2></div>
    <div class="box"><h2>I'm block 2</h2></div>
    <div class="box"><h2>I'm block 3</h2></div>
    <div class="box"><h2>I'm block 4</h2></div>
    <div class="box"><h2>I'm block 5</h2></div>
</div>

jquery 如何在DIV之间滑动？

1条答案

相关问题

热门标签

最新问答