Question

I have a view in which I there is a repeater control wrapped with a div.
I would like to slide down a button when a user hovers over this div.

How would I acheive this using jQuery slide down??

Thanks

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js ">   </script>
<script type="text/javascript">
$(document).ready(function () {
    $(".NewsStrip").hover(function () {
        $(".SeeAllEvents").slideDown();
    });
 });
</script>

Here is the div element Id like to apply the slide down to:

<div id="SeeAllEvents" class="SeeAllEvents" >
<asp:Image ID="Image1" runat="server" ImageUrl="/_Layouts/VenchursBullet.png"  CssClass="ImagerStyle"/>&nbsp
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="HyperlinkStyle"     NavigateUrl="http://intranet.company.com/Lists/Announcements/AllItems.aspx">See all events</asp:HyperLink>
</div>

And here is the repeater div Id like to apply the onmouseover/hover to:

<div id="NewsStrip" class="NewsStrip">
<table class="BottomPaddingZero" >
<tr>
   <asp:Repeater ID="repAnnouncements" runat="server">
        <ItemTemplate>
            <td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;">
                <asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />

                <div class="ImageStyle" >
                <asp:Image ID="imgLink" Height="110px" Width="150px" runat="server"  ImageUrl='<%#Eval("Images")%>' CssClass ="magnify" ToolTip="Click on Image to enlarge.  Click back to minimize." />
                </div>

                <br/><br/>
               <asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval ("Title")%>' CssClass="TitleStyle" ToolTip="Click to view details of the Announcement." />
            </td>
        </ItemTemplate>
    </asp:Repeater>
 </tr>
 </table><br />
 </div>

Answer 1

$("#yourdiv").hover(
  function () {
    $("#yourbutton").slideDown('slow');
  }, 
  function () {
    $("#yourbutton").slideUp('slow');
  }
);

1st function is “mouse enter” event. 2nd function is “mouse leave” event.
More info here:
http://api.jquery.com/hover/

http://api.jquery.com/slidedown/

http://api.jquery.com/slideup/