守则:http://jsfiddle.net/techsin/zLA8j/4/show
出于某种原因,当您单击按钮并且动画即将完成时,将无缘无故地显示白色falsh。我无法调试它。我需要帮助。但有时候没有问题。
$('.btn').click(
function(){
var t= $(this);
t.css('transform','scale(.9)');
setTimeout(function(){t.css('transform','');},600);
}
);
HTML ---
<div class="con">
<div class="con2">
<div class="pop">
<header>Would you like to be Awesome?</header>
<div class="txt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat totam quos quisquam in iure ea provident asperiores nesciunt assumenda autem sequi expedita quae reiciendis labore vitae aspernatur eaque repellat quis.</p>
</div>
</div>
<div class="btns">
的CSS ---
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: rgb(245, 246, 247);
width: 100%;
display: table;
}
.con {
display: table-cell;
vertical-align: middle;
}
.con2 {
display: table;
margin: auto;
}
.pop {
min-width: 300px;
border-radius:3px;
border:1px solid rgb(218, 218, 218);
position: relative;
height: 250px;
background-color: rgb(252, 253, 255);
}
.pop header {
height: 50px; line-height: 50px;
background-color: rgb(248, 248, 248);
position: relative;
padding-left: 15px;
font-family: sans-serif;
font-weight: bold;
color: rgb(123, 123, 134);;
}
.pop header:after {
content:'';
position: absolute;
height: 1px;
background: rgb(207, 207, 207);
left: 0;
width: 100%;
bottom: 0;
}
.btn {
-webkit-transition: all .2s ease-in-out;;
height: 48px;
width: 95px;
background-color: rgb(117, 117, 117);
border-radius:3px;
text-align: center;
line-height: 48px;
font-family: sans-serif;
color:white;
font-size: 15px;
display: inline-block;
margin: 0 5px;
cursor:default;
}
.btns {
width:300px;
text-align: center;
margin: auto;
margin-top: 11px;
}
.btn:hover { -webkit-transform: scale(1.1); }
.dec {background-color: rgb(70, 182, 151); }
.txt {
/* border:1px solid; */
text-align: center;
padding: 15px;
}
.txt p {
text-align: left;
width: 250px;
font-family: sans-serif;
font-size: 14px;
line-height: 22px;
margin: auto;
}