Problem with animation extender and IE9

Question

I am using ajax animation extender in my application. It is working perfectly in almost all browsersexcept IE9. I am using the code as:

<cc1:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="btnAddNewComment"
        BehaviorID="OpenAnimationBehavior">
        <Animations>
            <OnClick>
               <Sequence>
               <%-- Disable the button so it can't be clicked again --%>
               <EnableAction Enabled="false" />
               <%-- Position the wire frame and show it --%>

               <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>
               <%-- Move the wire frame from the button's bounds to the info panel's bounds --%>
               <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                   <Resize Width="850" Height="420" />
                   <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
               </Parallel>
               <%-- Move the  panel on top of the wire frame, fade it in, and hide the frame --%>

               <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
               <FadeIn AnimationTarget="info" Duration=".2" />
               <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>
               </Sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>




Corresponding JS function to play the animation is:

 // function to open the animation popup
    function OpenExtender(tempCommentID)
    {

        var behaveYourself       = $find("OpenAnimationBehavior");
        var onClickAnimation     = behaveYourself.get_OnClickBehavior();
        onClickAnimation.play();

        return false;
    }

While clicking on button 'btnAddNewComment' a pop up is coming, but the problem is on mouse over the popup div. When i do mouse over over the popup, the popup get disappeared.

Could anybody say what will be the problem?

Answer 1

it seem to me, that IE9 doesn't remember the changes made via Animation Extender. Even the official sample doesn't work. If (for example) the Display: none, and you animated it to Dislay: block, when the animation stops it will revert do Display: none on the next redraw (you need to move mouse over the element, or otherwise invoke refresh). I hope it will be fixed really soon.

Answer 2

I realize the next step: Remove the following code in the control called from the AnimationExtender:

"opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);"

After that, the problem was fixed.