Is there a way to do this? I have an image which rotates to a grey area. This is fine. What I want is, that it says on the grey area if I click again on the area. What is the best way to do this?
Here you have an example of what I have:
CSS:
.f1_container {
position: relative;
margin:10px;
width: 450px;
height: 281px;
z-index : 1;
float:left;
}
.f1_container {
-webkit-perspective: 1000;
perspective: 1000;
}
.f1_card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.f1_container.active .f1_card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
color: white;
text-align: center;
background-color: #aaa;
}
body{width:2000px}
Replace your JS with:
$('.f1_container').one('click', function() {
$(this).addClass('active');
});
The one
function executes the event only once per element.
Furthermore, I've changed your toggleClass
to a simple addClass
, either of these changes should be sufficient by itself, however, theres no need for a toggle here.
You want to get grey area if click on grey area? Isnt? If yes below It will help
$('.f1_container').click(function() {
$(this).addClass('active');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.