in the below code i have problem with callback function as used in line 21+ i have 3 radio buttons and if click any one a div associated with this radio button will appear and other 2 will fadeout. if i repeat the clicks on all the radio buttons fast
i can see all the radio buttons
how to over come this
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <script src="jquery-1.7.js" type="text/javascript"></script> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type ="text/javascript"> $(document).ready(function () { $("#divinput").click(function () { $("#divreport").removeClass("divborder"); $("#divinput").addClass("divborder"); $("#divslide2").slideUp("slow", function () { $("#divslide1").slideDown("slow"); }); }); $("#divreport").click(function () { $("#divreport").addClass("divborder"); $("#divinput").removeClass("divborder"); $("#divslide1").slideUp('slow', function () { // I HAVE PROBLEM HERE $("#divslide2").slideDown("slow"); }); }); //to display period - week, month, and between dates //------------------------ $("#<%=RadioButton1.ClientID %>").click(function () { $("#month").fadeOut("slow", function () { $("#dates").fadeOut("slow",function() { $("#week").fadeIn(); }); }); }); //------------------------ $("#<%=RadioButton2.ClientID %>").click(function () { $("#week").fadeOut("slow", function () { $("#dates").fadeOut("slow", function(){$("#month").fadeIn(); } ); }); }); //------------------------ $("#<%=RadioButton3.ClientID %>").click(function () { $("#month").fadeOut("slow", function () { $("#week").fadeOut("slow",function(){$("#dates").fadeIn(); }); }); }); //------------------------ }) </script> <div style ="width:180px; height:30px;"> <div id ="divinput" class="divmultiview" > <a class="aclass" href="#">Input</a></div> <div id ="divreport" class ="divmultiview"> <a class="aclass" href="#">Report</a> </div> </div> <div id ="divslide1" class="ddd"><p>this is div 1 <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </p></div> <div id="divslide2" class="ddd"> <div> <asp:RadioButton ID="RadioButton1" GroupName="rd" Text="This Week" runat="server" /> <asp:RadioButton ID="RadioButton2" GroupName="rd" Text="This Month" runat="server" /> <asp:RadioButton ID="RadioButton3" GroupName="rd" Text="Between 2 Dates" runat="server" /> </div> <div style =" width:200px; " > <div id ="week" style ="display:block;" class ="divperiod"><p> this week</p> </div> <div id ="month" class ="divperiod" > <p> this month</p> </div> <div id ="dates" class ="divperiod"> <p> Between dates</p> </div> </div> </div> </asp:Content> </div>
you use stop() to stop animations. on the click you need to stop() all fadeout/fadein(), then dtermine via css which are partially open, then strat new animations.