单击滑动切换按钮时，两个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"
});
});
});
最佳答案
<强> Updated Fiddle .
您可以使用标志变量(在我的示例中为visible)，然后切换真/假值，并使用此标志切换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>关于javascript - jQuery 幻灯片在同一按钮单击中出现和消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53523212/