3

で「 」として割り当てられたコントロールがありDataListます。画像にホバー効果を設定し、マウスがホバーしているアクティブに設定し、その他の値を不透明度に設定したいと思います。ImageButtonclassimgOpaLevel2UpdatePanelDataList

削除するUpdatePanelと正常に動作します。しかし、追加UpdatePanelDataListた後は機能しません。何か案が?

マークアップ:

<asp:UpdatePanel runat="server" ID="updatePanelLevel2">
                        <Triggers>
                        </Triggers>
                        <ContentTemplate>
                            <asp:DataList id="dlCarreirList" runat="server" DataKeyField="CarrierID" 
                                RepeatColumns="50" RepeatDirection="Horizontal" 
                                ItemStyle-VerticalAlign="Top" onitemcreated="dlCarrerList_ItemCreated" 
                                onitemcommand="dlCarreirList_ItemCommand">
                                <ItemTemplate>
                                    <asp:HiddenField ID="hdnCarrerID" runat="server" Value='<%# Eval("CarrierID") %>' />

                                    <ul class="unstyled clearfix" style="height:164px;">
                                        <li><a href="#url">
                                            <div class="iphone5-2-pro-img">
                                                <asp:ImageButton ID="ImgDeviceImageLevel2" CommandName="ImgButtonLevel2" CommandArgument='<%# Eval("CarrierID") %>' ImageUrl='<%#  Eval("CarrierImg") %>' class="imgOpaLevel2" 
                                                    alt="" RowID='<%# Container.ItemIndex + 1 %>' title='<%# Eval("Carrier") %>'
                                                    runat="server" />
                                                <div class="iphone-pro-img-txt">
                                                    <asp:Label ID="lblDisplayText" runat="server" Text='<%# Eval("Carrier") %>'  />
                                                 </div>
                                        </a></li>
                                    </ul>
                                </ItemTemplate>
                            </asp:DataList>
                            <asp:Label ID="lbltest" runat="server" Text="Hello" Width="114" Height="20" Visible="false" />
                       </ContentTemplate>
                    </asp:UpdatePanel>

UpdatePanel Removed が正常に動作するときの Jquery スクリプト:

$('.imgOpaLevel2').each(function() {
            $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
            $(this).hover(
                   function() {
                       $('.imgOpaLevel2').stop().animate({ opacity: 0.5 }, 200);
                       $(this).stop().animate({ opacity: 1.0 }, 200);
                       if (selectedImgIDLevel2 != null) {

                           $('.imgOpaLevel2').stop().animate({ opacity: 0.5 }, 200);

                           $("#" + selectedImgIDLevel2).stop().animate({ opacity: 1.0 }, 200);
                       }
                       else {
                           //nothing
                       }
                   }, //SMS: hoverOut function parameter here
                   function() {

                       if (selectedImgIDLevel2 == null || selectedImgIDLevel2 == undefined) {
                           $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
                       }    
                   })
        });

だから試してみた

$(document).on('mouseenter', '.imgOpaLevel2', function() {
            var id = $(this).attr('id');
            alert("after ID:" + id);
            $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
            $(this).hover(
                   function() {
                       $('.imgOpaLevel2').stop().animate({ opacity: 0.5 }, 200);
                       $(this).stop().animate({ opacity: 1.0 }, 200);
                       if (selectedImgIDLevel2 != null) {
                           $('.imgOpaLevel2').stop().animate({ opacity: 0.5 }, 200);
                           $("#" + selectedImgIDLevel2).stop().animate({ opacity: 1.0 }, 200);
                       }
                       else {
                           //nothing
                       }
                   },
                   function() {
                       //$("#toolTipLevel2").css("display", "none");
                       if (selectedImgIDLevel2 == null || selectedImgIDLevel2 == undefined) {
                           $('.imgOpaLevel2').stop().animate({ opacity: 1.0 }, 200);
                       }    
                   })
        });

注:上記のコードは単に表示されますalertが、alert何かが間違っている場合はコードが正しく動作しません。

助けてください!ありがとう!

4

1 に答える 1