Question

I’m trying to implement an updatepanel animation with jquery, I was searching in the web how to do it and here is my code so far:

Head:

<script type="text/jscript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
    #Container 
    {
        padding: 10px;
        height: 100px;
        width: 200px;
        background: #D3CECE;
        border: 1px solid #1E36E7;
    }
</style>

Body:

<form id="form1" runat="server">
<div>    
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">           
    </asp:ScriptManager>        
    <asp:Timer ID="Timer1" runat="server" Interval="4000" OnTick="Timer1_Tick"></asp:Timer>
    <asp:UpdatePanel ID="upOne" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
        <ContentTemplate>
            <div id="Container">
                <asp:Label ID="LblTime" runat="server" Text="Time to be set"></asp:Label>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>            


<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();        

    // Hook up Page Event Handler - called when panels are created/updated
    prm.add_pageLoaded(pageLoaded);

    // Handler implementation
    function pageLoaded(sender, args) {

        var panel = findPanel("<%= upOne.ClientID %>",
                              args._panelsUpdated);
        if (panel) {
            // find the embedded DIV tag container and fade it in
            var jPanel = $(panel);
            jPanel.fadeIn(1500);
        }
    }

    function findPanel(id, panels) {
        if (panels == null || panels.length < 1)
            return null;

        for (var i = 0; i < panels.length; i++) {
            var el = panels[i];
            if (el.id == id)
                return el;
        }

        return null;
    }

</script>
</div>
</form>

It basically updates an asp:label every 4 sec with the current datetime in the code behind.

I want to apply the fadeIn effect to the Div id=”Container” but for some reason it doesn’t work.

could someone look into the code to see what I’m doing wrong.
Thanks.

Answer 1

You can add a line before jPanel.fadeIn(1500); with jPanel.hide(); and that should do the trick.

Reference link:
click here