在jquery中重复单击动画

Repeating the click animation in jquery

本文关键字：单击 动画 jquery      更新时间：2023-09-26

当单击带有一些动画的状态时，我使用jquery来显示文本。问题是，动画效果仅在第一次单击状态时运行，而在第二次单击时不运行。代码如下：

$("#maharashtra").live("click",function(){
    $("#mainbg").hide();
    $("#divmaha").animate({left:"700px"});
    $("#divmaha").show() ;
    $("#divguj").hide();
    $("#divgoa").hide();
    $("#divkerala").hide();
    $("#divassam").hide();
    $("#divmeghalaya").hide();
    $("#divarunachal").hide();
    $("#divmizoram").hide();
    $("#divkarnataka").hide();
    $("#divandhra").hide();
    $("#divtamilnadu").hide();
    $("#divraj").hide();
    $("#divjammu").hide();
    $("#divuttaranchal").hide();
    $("#divhp").hide();
    $("#divharyana").hide();
    $("#divpunjab").hide();
    $("#divdelhi").hide();
    $("#divmadhya").hide();
    $("#divjharkhand").hide();
    $("#divchattisgarh").hide();
    $("#divup").hide();
    $("#divorissa").hide();
    $("#divbihar").hide();
    $("#divwestbengal").hide();
    $("#divsikkim").hide();
    $("#divtripura").hide();
    $("#divnagaland").hide();
});

这是因为已经执行了动画。现在，引入一个"重置"按钮，并添加动画中所有内容的反转，使其移回原来的位置。现在，每当有人点击动画按钮时，它就会被动画化。

顺便说一句，你可以压缩这个代码。组合选择器并用逗号分隔。

尝试在上实现

$("#maharashtra").on("click",function(){ });

由于你还没有提供完整的代码，我有另一个猜测，你可能没有重置动画。在隐藏了所有的东西之后。。在第二次点击之前，你是否显示了所有剂量隐藏的东西。？

因为动画是在第一次点击时执行的。试试这个。你会知道问题出在哪里。

     $("#maharashtra").live("click",function(){
       reset();
 $("#mainbg").hide();
 $("#divmaha").animate({left:"+=700px"});
 $("#divmaha").show() ;

});
 function reset ()
  {
             //reset your element to original position here and then you dont need write +=700px you can simply write left:"700px" 
   }

现在，如果你想的话，你的元素每次点击都会向左移动700像素。小提琴：http://jsfiddle.net/chetandoke/QwWUn/

相关文章：