我试图单击以从左至右显示div。我已经从jsfiddle.net创建了这个DEMO
在此演示中,您可以看到有一个绿色的div。当您单击该div时,左div从左到右打开。
但是同时单击绿色按钮时,绿色按钮类别会自动更改,并且html文本也会更改。(单击以显示向左滑动以关闭)
因此,当我单击绿色div时,我想使之打开,然后左侧的div将打开,第二次单击绿色的div,然后单击左侧的div,并使其具有动画效果。
我该怎么做。我在DEMO中缺少的东西。
这是一个代码:
JS
$(".click_open_close").click(function(){
var id = $(this).data("id");
$(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
$(".click_open_close").html("Close");
$(".r").removeClass("click_open_close");
$(".r").addClass("pp");
});
$(".pp").click(function(){
$(".left").animate({width:"0%"},200);
$(".left_in").animate({width:"0%"},200);
});
的HTML
<div class="test_container">
<div class="left">
<div class="left_in"><div class="aa">ss</div></div>
</div>
<div class="r click_open_close" data-id="100">Click To Show Slide Left In</div>
</div>
的CSS
.test_container{
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left{
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in{
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: #f7f7f7;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa{
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius:0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
right:0;
}
.click_open_close{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
.pp{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
您只是不必要地更改了点击级别。检查此演示和下面的代码。
只需将HTMLdata-*
属性添加到您的按钮即可确定状态,如下所示:
<div class="r click_open_close" data-state="close" data-id="100">Click To Show Slide Left In</div>
JS
$(".click_open_close").on('click',function(){
var id = $(this).data("id");
var state=$(this).data("state");
if(state==="close")
{
$(this).data("state",'open');
$(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
$(this).text('Close');
}
else
{
$(this).data("state",'close');
$(".left_in").animate({width:"0%"}, 200).find(".aa").animate({width:"0%"}, 200);
$(this).text('Click To Show Slide Left In');
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句