FadeIn, FadeOut not working

See more:

C#

ASP.NET

Javascript

The effects of fadein and fadeout did not seem to work. I have seem many articles on fadeIn and fadeOut on ModalPopUpExtender. I have solved all the errors occurred before this but i still do not know why when i run it, i am not able to see the effects of fadein and fadeout. Furthermore, there are no errors shown.

Here my .aspx code for your references.

<script type="text/javascript">

    function pageLoad() {

        $addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
        $addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);
    }
    
    function showModalPopupViaClient(ev) {

        ev.preventDefault();
        var modalPopupBehavior = $find('buttonPopUp_ModalPopupExtender');
        $find("AnimationExtender1").get_OnClickBehavior().play();
        modalPopupBehavior.show();
    }
    function hideModalPopupViaClient(ev) {

        ev.preventDefault();
        var modalPopupBehavior = $find('buttonPopUp_ModalPopupExtender');
        modalPopupBehavior.hide();

    }

    </script>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

 <asp:Button ID="buttonPopUp" runat="server" CssClass="hide"/>
    <asp:ModalPopupExtender ID="buttonPopUp_ModalPopupExtender" runat="server" 
         DynamicServicePath="" Enabled="True" TargetControlID="buttonPopUp" BehaviorID="buttonPopUp_ModalPopupExtender"
         PopupControlID="PopUp" BackgroundCssClass="modalBackground" DropShadow="true" >
    </asp:ModalPopupExtender>
      <asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="FadeIn">
        <Animations>
                <OnClick>
                    <Sequence AnimationTarget="PopUp">                
                        <FadeIn Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
                    </Sequence>
                </OnClick>

            </Animations>
        </asp:AnimationExtender>
        <asp:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="FadeIn">
        <Animations>
                <OnClick>
                    <Sequence AnimationTarget="PopUp">                
                        <FadeOut Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
                    </Sequence>
                </OnClick>

            </Animations>
        </asp:AnimationExtender>
        <asp:HiddenField runat="server" ID="FadeIn" />
 </p>

   <div id="PopUp">
        <div id="ImagePopUp"> 
        <asp:Image ID="Image4" runat="server" Height="260px" Width="352px" />
        </div>
        

        <asp:Label ID="packageName" CssClass="PopUpDeco" runat="server" Text=""></asp:Label>
</div>