我只想告诉用户下一个操作(点击链接)需要一些时间。。。(以避免重新加载页面并再次单击链接)。
我试过:
<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p>
<script>
$(document).ready(function() {
$("a").click(function() {
$("#message").show();
});
});
</script>
但是消息没有出现。点击按预期进行。
$(function() {
$("a").click(function() {
$("#message").stop(true, true).show(250);
$("#message").delay(2000).hide(250);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href = "#">test foo link</a>
<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p>
像这样的东西?
为了使其更具跨浏览器性(Safari、Chrome出现问题),最好使用另一个事件:
<script>
$(document).ready(function() {
$("a").on("mousedown", function(e) {
$("#message").show();
});
});
</script>
工作起来很有魅力。当然,他们可以在释放鼠标时退出链接,但在mouseup上,你会遇到与点击相同的问题。
如果你真的想要100%,你可以在文档级别的鼠标上隐藏消息:
<script>
$(document).ready(function() {
$("a").on("mousedown", function(e) {
$("#message").show();
});
$(document).on("mouseup", function(){
$("#message").hide();
});
});
</script>