Question

我想在我的webform页面中使我的imageset类在我的listview的更改页面上淡入淡出。我怎样才能做到这一点？我的代码似乎不起作用... jQuery脚本甚至不起作用。有什么想法吗？

我的MasterPage的主管部分......

<head runat="server">
    <title>Cukiernia ŁOBZA</title>
    <link rel="stylesheet" href="styles/user.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="js/lightbox.min.js"></script>
    <link href="styles/lightbox.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('.imageset').fadeIn(2000);
        });
    </script>
</head>

我的网页表单的ASP代码......

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="leftside">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <div class="btnup">
            <asp:DataPager ID="DataPager1" runat="server" PagedControlID="Listview1" PageSize="3">
                <Fields>
                    <asp:NextPreviousPagerField ButtonType="Image" FirstPageText="" LastPageText="" NextPageText="" PreviousPageImageUrl="~/images/arrowbtnup.png" PreviousPageText="" ShowNextPageButton="False" />
                </Fields>
            </asp:DataPager>
        </div>
        <div class="imageset">

        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID">
            <AlternatingItemTemplate>
                <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl='<%# Eval("image1", "{0}") %>' PostBackUrl='<%# Eval("ID", "~/oferta.aspx?cat=" + Request.QueryString["cat"] + "&sub=" + Request.QueryString["sub"] + "&id={0}") %>' Width="180px" Height="120px" CssClass="imagebtn" CommandName="Choose" />
            </AlternatingItemTemplate>
            <ItemTemplate>
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("image1", "{0}") %>' PostBackUrl='<%# Eval("ID", "~/oferta.aspx?cat=" + Request.QueryString["cat"] + "&sub=" + Request.QueryString["sub"] + "&id={0}") %>' Width="180px" Height="120px" CssClass="imagebtn" CommandName="Choose" />
            </ItemTemplate>
        </asp:ListView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [C_Produkty] WHERE (([kategoria] = @kategoria) AND ([subkategoria] = @subkategoria)) ORDER BY [ID]">
            <SelectParameters>
                <asp:QueryStringParameter Name="kategoria" QueryStringField="cat" Type="Int32" />
                <asp:QueryStringParameter Name="subkategoria" QueryStringField="sub" Type="Int32" />
            </SelectParameters>
            </asp:SqlDataSource>
        </div>
        <div class="btndown">
            <asp:DataPager ID="DataPager2" runat="server" PagedControlID="Listview1" PageSize="3">
                <Fields>
                    <asp:NextPreviousPagerField ButtonType="Image" FirstPageText="" LastPageText="" NextPageImageUrl="~/images/arrowbtndown.png" NextPageText="" PreviousPageText="" ShowPreviousPageButton="False" />
                </Fields>
            </asp:DataPager>
        </div>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div id="space">

    </div>
    <div id="rightside">
        <div class="description">
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        </div>
        <div class="rightspace">

        </div>
        <div class="imagespace">
            <asp:HyperLink ID="HyperLink1" runat="server" ImageHeight="320px" ImageWidth="480px" CssClass="image1" Visible="false" data-lightbox="image"></asp:HyperLink>
            <asp:HyperLink ID="HyperLink2" runat="server" ImageHeight="80px" ImageWidth="120px" CssClass="image2" Visible="false" data-lightbox="image"></asp:HyperLink>
            <asp:HyperLink ID="HyperLink3" runat="server" ImageHeight="80px" ImageWidth="120px" CssClass="image3" Visible="false" NavigateUrl="~/index.aspx" ImageUrl="~/images/tortbtn.png"></asp:HyperLink>
        </div>
    </div>
</asp:Content>

Answer 1

可能是因为您的imageset已经显示，请尝试：

$('.imageset').css({'opacity': 0}).animate({'opacity': 1}, 2000);

<强>解释

我使用$.css()使<div>透明化。 jQuery允许我们链接方法，然后使用$.animate()来重新显示div。

<强>段

此片段说明了两种方法之间的区别：

＆＃13;

$("#test1").fadeIn(2000)
$("#test2").css({'opacity': 0}).animate({'opacity': 1}, 2000);

＆＃13;

div {
  float: left;
  background: #f00;
  width: 200px;
  height: 200px;
  margin: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="test1">$("#test1").fadeIn(2000)</div> <div id="test2">$("#test2").css({'opacity': 0}).animate({'opacity': 1}, 2000);</div>

＆＃13;

Answer 2

代码不起作用，因为$(document).ready在每次部分回发后都不会触发。您需要使用pageLoad。

function pageLoad() { 
    $('.imageset').hide().fadeIn(2000);
}

文档：http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx

如何在页面更改时将jQuery fadeIn添加到我的列表视图中？

2 个答案: