で「 」として割り当てられたコントロールがありDataList
ます。画像にホバー効果を設定し、マウスがホバーしているアクティブに設定し、その他の値を不透明度に設定したいと思います。ImageButton
class
imgOpaLevel2
UpdatePanel
DataList
削除するUpdatePanel
と正常に動作します。しかし、追加UpdatePanel
しDataList
た後は機能しません。何か案が?
マークアップ:
<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
何かが間違っている場合はコードが正しく動作しません。
助けてください!ありがとう!