我有以下 Javascript 可以使文本链接持续发光/脉动。此链接显示同一页面的另一部分,因此我希望它在用户单击后停止。
<script type="text/javascript">
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}
pulsate();
});
</script>
所以基本上,我只需要知道我需要在此处添加什么,以便在单击后效果停止。
如果再次点击相同的链接,页面显示的部分将隐藏 - 第二次点击后再次启动效果是否太麻烦?
期待各位好心人的解答
斯科特。
最佳答案
只需绑定(bind)到点击事件并调用stop() .您还应确保不透明度已恢复为 1:
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
//Restore opacity to 1
$(this).animate({ opacity: 1 }, 1200, 'linear');
//Stop all animations
$(this).stop();
});
}
pulsate();
});
这是 a working jsFiddle .
关于单击时停止的 Javascript 发光/脉动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7696576/