Question

我想在dom准备好之后让按钮两次脉动。我首先尝试使用@ -webkit-keyframes pulsate，但这是在加载所有内容之前完成的工作。所以我想我需要JS。

这就像改变不透明度但是如何使按钮调整大小（即增加/减少填充）而不是真正的心脏？

$(document).ready(function() {
  $(".button").effect("pulsate", {
    times: 2
  }, 3000);
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<a class="button" href="#" style="padding: 5px 17px;background:red;color:white;">buy now</a>

Answer 1

你可以这样做：

$(document).ready(function() {
    for (var i = 0; i < 2; i++ ) {
        $(".button")
            .animate( { backgroundColor: "#f00" , 'padding' : 10}, 3000)
            .animate( { backgroundColor: "transparent" , 'padding' : 0 }, 3000);
    }
});

Online demo (jsFiddle)

页面加载后两次脉动按钮

1 个答案: