Multiple UserControls with Timer, Update Panel, and Animation Extender

[rcombs4]

Hey guys, I'm trying to make a User Control that functions as a slide show. Basic idea is that in the UC i have a Update Panel with a Timer, Update Panel, and a Timer. Inside the Update Panel I have a Panel and a Div with a label. Each time the timer ticks I change the background of the Panel as well as the text in the label. The reason I do the background is because it is easier to get the style I want(Text at the bottom with an opacity).

Here is the UserControl

    <asp:UpdatePanel runat="server" ID="SlideShow" UpdateMode="Conditional">
        <ContentTemplate>                                                                   
            <asp:Timer ID="timMain" runat="server" Interval="4000" />
            <asp:Panel ID="pnlImg" runat="server" CssClass="slide-img">
                <asp:panel id="pnlText" runat="server" cssclass="slide-text">
                    <asp:Label ID="SlideShowText" runat="server" Text="First Slide" />
                </asp:panel>
            </asp:Panel>                                               
        </ContentTemplate>
        <Triggers>
            
        </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanelAnimationExtender runat="server" ID="UPextender" TargetControlID="SlideShow" BehaviorID="animation">
        <Animations>
           <OnUpdating>                        
                <FadeOut Duration="1" Fps="20" minimumOpacity=".1" />
            </OnUpdating>
            <OnUpdated>            
                <FadeIn Duration="1" Fps="20" minimumOpacity=".1" />
            </OnUpdated>          
        </Animations>        
    </asp:UpdatePanelAnimationExtender>

 Protected Sub timMain_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles timMain.Tick

        Dim intNewSeq As Integer = ViewState("curSeq") + 1

        If intNewSeq >= slideList.Count Then
            intNewSeq = 0
        End If

        LoadSlide(slideList(intNewSeq))

        ViewState("curSeq") = intNewSeq

    End Sub

 Private Sub LoadSlide(ByVal img As UploadedPicture)
           pnlImg.BackImageUrl = "/img/uploaded/" & img.PictureID & ".jpg"
        pnlImg.Width = img.Width
        pnlImg.Height = img.Height
        pnlText.Style("Width") = img.Width - 6 & "px"
        SlideShowText.Text = img.Text
    End Sub

Here is the problem. The UC works perfectly when I just have one of them on a page. But once I put more than one it gets messed up. The functionality is there. The text and image get changed on the individual UCs. But the problem is with the animation. The picture fades, but stays faded for a few seconds, then it will quickly show the next image at full opacity. But then 1/2 second later it starts the fade out. It just seems that the Animation Extender is firing anytime any of the timers fire. I've tried putting the Timer outside of the Update Panel and including a Trigger. I can disable the Animation Extender and the functionality is there, just not very pretty.

Any help you can provide would be appreciated.

 

[JohnH]

It just seems that the Animation Extender is firing anytime any of the timers fire.

"by design", UpdatePanelAnimation Sample

It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes).

You probably have to find a way to use only one common animation extender, one common timer or the like.