显示一个“弹跳点加载”gif;点击Over按钮

Show a "bouncing dot loading gif" over button when clicked

本文关键字：弹跳点加载 加载 gif 按钮 Over 点击 一个 显示      更新时间：2023-09-26

我试图加载一个"弹跳点加载gif"在一个按钮的数字，而脚本正在运行。

我问题:

  • 整个按钮被替换为图像。我只是想把文字替换掉!请帮助。谢谢。

代码示例:http://jsfiddle.net/v1pezwuh/1/

Javascript 

$(function() {
$(".vote").click(function() 
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if(name=='up')
{
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "up_vote.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
   parent.html(html);
  }  });
 }
else if(name=='down')
{
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "down_vote.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
       parent.html(html);
        }
        });

  }
 return false;
        });
   });
CSS 

body {
background: black;
}
.button-vote-up
{
    display: inline-block;
    background: #23d76f;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-color: white;
    padding: 5%;
    width: 100px;
    outline: 0;
    border-radius:10%;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
    background-image: -moz-linear-gradient(top, #23d76f, #019c0f);
    background-image: -webkit-linear-gradient(top, #23d76f, #019c0f);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#23d76f), to(#019c0f));
    background-image: -ms-linear-gradient(top, #23d76f, #019c0f);
    background-image: -o-linear-gradient(top, #23d76f, #019c0f);
    background-image: linear-gradient(top, #23d76f, #019c0f);
    text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
}
.button-vote-up:hover
{
    background: #2bfb83;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
    background-image: -moz-linear-gradient(top, #2bfb83, #0cad32);
    background-image: -webkit-linear-gradient(top, #2bfb83, #0cad32);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2bfb83), to(#0cad32));
    background-image: -ms-linear-gradient(top, #2bfb83, #0cad32);
    background-image: -o-linear-gradient(top, #2bfb83, #0cad32);
    background-image: linear-gradient(top, #2bfb83, #0cad32);
}
.button-vote-up:active
{
    background: #019c0f;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
    background-image: -moz-linear-gradient(top, #019c0f, #23d76f);
    background-image: -webkit-linear-gradient(top, #019c0f, #23d76f);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#019c0f), to(#23d76f));
    background-image: -ms-linear-gradient(top, #019c0f, #23d76f);
    background-image: -o-linear-gradient(top, #019c0f, #23d76f);
    background-image: linear-gradient(top, #019c0f, #23d76f);
}
HTML 

<div class='up'>
<a href='' class='vote' id='2' name='up'>
    <div class="button-vote-up">
      <div class="numvotes">27</div>
      <div class="voteupdown">UP</div>
    </div>
</a>

Replace

$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');


$(this).children().first().fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');

jsfiddle

为了让它更短一点，你也可以用.eq(0)代替.first()。

这是因为$(this)在您的功能是$('.vote')按钮。相反，使用$('.button-vote-up')或按钮内的其他元素之一。

相关文章：