Question

在单击Slide toggle按钮时，两个div沿两个相反的方向滑动。我想单击同一按钮，使它们再次出现，我该怎么办？下面是代码。

$(document).ready(function(){
    $(".slide-toggle").click(function(){            
        $(".box .left").css( {
            "-webkit-transform" : "translateX(-100%) " ,
            "transform": "translateX(-100%)",
            "transition": "all 1s ease-out"
        });
        $(".box .right").css( {
            "-webkit-transform" : "translateX(100%) " ,
            "transform": "translateX(100%)",
            "transition": "all 1s ease-out"
        });
    });
});

jsfiddle

Answer 1

Updated Fiddle。

您可以使用标志变量（在我的示例中为visible），然后将值切换为true / false，然后使用此标志来切换transform的值，例如：

$(document).ready(function() {
  var visible = true;

  $(".slide-toggle").click(function() {
    var translate = visible ? 100 : 0;

    $(".box .left").css({
      "-webkit-transform": "translateX(-" + translate + "%) ",
      "transform": "translateX(-" + translate + "%)",
      "transition": "all 1s ease-out"
    });
    $(".box .right").css({
      "-webkit-transform": "translateX(" + translate + "%) ",
      "transform": "translateX(" + translate + "%)",
      "transition": "all 1s ease-out"
    });
    visible = translate === 100 ? false : true;
  });
});

.box {
  float: left;
  overflow: hidden;
  background: #f0e68c;
}


/* Add padding and border to inner content
    for better animation effect */

.box-inner {
  width: 400px;
  padding: 10px;
  border: 1px solid #a29415;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <button type="button" class="slide-toggle">Slide Toggle</button>
  <hr>
  <div class="box">
    <div class="box-inner left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. eger aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
  </div>

  <div class="box">
    <div class="box-inner right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. eger aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
  </div>
</body>

</html>

Answer 2

一个非常简单直接的解决方案是在box元素上切换一个类。

这意味着，当您第一次单击按钮时，添加一个类，向left和right元素添加一些样式，然后删除该类，以使元素返回其原始位置。

在下面检查

$(document).ready(function(){
        $(".slide-toggle").click(function(){
             $(".box").toggleClass('go-away')
                 
        });
    });

.box{
        float:left;
        overflow: hidden;
        background: #f0e68c;

    }
    /* Add padding and border to inner content
    for better animation effect */
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid #a29415;
        transition:all 1s ease-out;
    }
   .box.go-away .left {
     transform:translateX(-100%) 
   }
    .box.go-away .right {
     transform:translateX(100%) 
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button type="button" class="slide-toggle">Slide Toggle</button>
    <hr>
    <div class="box">
        <div class="box-inner left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. eger aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
    </div>

    <div class="box">
        <div class="box-inner right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. eger aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
    </div>
</body>
</html>

Answer 3

$(document).ready(function(){
        $(".slide-toggle").click(function(){
            // $(".box").animate({
            //     width: "toggle"
            // });
            if($(".box .left").hasClass("out")){
                $(".box .left").removeClass("out");
              $(".box .left").css( {
                "-webkit-transform" : "translateX(0%) " ,
                "transform": "translateX(0%)",
                "transition": "all 1s ease-in"
            });
            $(".box .right").css( {
                "-webkit-transform" : "translateX(0%) " ,
                "transform": "translateX(0%)",
                "transition": "all 1s ease-in"
            });
            } else{
            $(".box .left").addClass("out");
            $(".box .left").css( {
                "-webkit-transform" : "translateX(-100%) " ,
                "transform": "translateX(-100%)",
                "transition": "all 1s ease-out"
            });
            $(".box .right").css( {
                "-webkit-transform" : "translateX(100%) " ,
                "transform": "translateX(100%)",
                "transition": "all 1s ease-out"
            });
            }      
        });
    });

Updated Fiddle

jQuery幻灯片在同一按钮中单击时出现和消失

3 个答案: