[RESOLVED]I have a problem with callback function

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.

Leave a Reply