脉动分区，直到单击
脉动分区，直到单击
提问于 2014-05-12 21:24:31
我试图让这个按钮脉动，直到用户点击它，然后它停止跳动。
我必须使用jQuery1.6.2.min.js，因为我使用的是一个使用jQuery1.6.2.min.js的老虎机插件。我知道这个版本的jQuery可能不支持脉动，因此我愿意使用CSS来达到同样的效果。任何建议都是非常感谢的。谢谢：)
当前jsFiddle：http://jsfiddle.net/S5PB7/
HTML:
<div id="btn2" class="button">Kitchen Act!</div>CSS:
#btn2{
float: right;
margin: 0px;
padding: 10px;
background-color: blue;
color:white;
cursor: pointer;
border:none;
border-radius:10px;
top:20px;
margin:auto 0;
}JQUERY:
$(document).ready(function keepPulsing() {
$pulse.effect("pulsate", 500, keepPulsing);
}
var pulsing = true,
$pulse = jQuery("#btn2").click(function(){
if (pulsing) {
// jQuery(".other").slideDown();
jQuery(this).stop(true, true).css("opacity",1);
}
pulsing = !pulsing;
});
keepPulsing();回答 4
Stack Overflow用户
回答已采纳
发布于 2014-05-12 21:35:32
这里是一个更新的jsdiffle http://jsfiddle.net/S5PB7/4/ -脉冲与css，然后删除它的点击。
js
$(document).ready(function(){
$("#btn2").click(function(){
$(this).removeClass('pulse');
});
})css
#btn2{
float: right;
margin: 0px;
padding: 10px;
background-color: blue;
color:white;
cursor: pointer;
border:none;
border-radius:10px;
top:20px;
margin:auto 0;
}
.pulse {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite
}
@-webkit-keyframes pulsate {
0% { opacity: 0.0}
10% { opacity: .20}
20% { opacity: .40 }
30% { opacity: .60 }
40% { opacity: .80 }
50% { opacity: 1.0}
60% { opacity: .80}
70% { opacity: .60}
80% { opacity: .40}
90% { opacity: .20}
100% { opacity: 0.0}
}Stack Overflow用户
发布于 2014-05-12 21:32:41
为什么不使用css动画使按钮脉动。像这样的东西(没有前缀)：
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pulse {
animation-iteration-count: infinite;
animation-name: pulse;
animation-duration: 1s;
animation-fill-mode: both;
}那么，您的jQuery所需要做的就是在单击时删除.pulse类。就像这样：
$('#btn2').click(function () {
$(this).removeClass('pulse');
});和更新的小提琴：http://jsfiddle.net/S5PB7/2/
Stack Overflow用户
发布于 2014-05-12 21:31:11
试试这个：
function keepPulsing() {
$pulse.effect("pulsate", 500, keepPulsing);
}
$(document).ready(function(){
var pulsing = true,
jQuery("#btn2").click(function(){
if (pulsing) {
// jQuery(".other").slideDown();
jQuery(this).stop(true, true).css("opacity",1);
}
pulsing = !pulsing;
keepPulsing();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23619120
复制相关文章
相似问题
腾讯云开发者
