How to apply jQuery slide down on a button when user hovers over a div element?

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>

"I would like to slide down a button when a user hovers over this div" ... "Here is the div element Id like to apply the slide down to" ... ?? So, what do you want to slide down, a button or a div...which one? I think I can help you, but I'm not clearly following what it is you're trying to do. — Bob Yexley, Jun 29 '12 at 13:25

score 2 · Accepted Answer · answered Jun 29 '12 at 12:58

2

$("#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/

answered Jun 29 '12 at 12:58

Mustafa

825
3
14
37

Thanks guys! @NimChimpsky I have updated my question with the code. Could you please take alook and besides do I need to hide the button control in the first place? – user1266515 Jun 29 '12 at 13:05

score 1 · Answer 2 · answered Jun 29 '12 at 12:58

1

$("#myDivId").hover(function(){
  $("#myButton").slideDown();
})

http://api.jquery.com/hover/

answered Jun 29 '12 at 12:58

NimChimpsky

46,453
60
198
311

score 1 · Answer 3 · answered Jun 29 '12 at 13:04

Having no idea what your markup looks like, it will be difficult to help you figure out the proper selectors you'll need, but ultimately it should look something like this:

$('.div-class').hover(
    function () { $(this).stop().find('.your-button-class').slideDown(); }, // <- this will be fired on mouseover
    function () { $(this).stop().find('.your-button-class').slideUp(); } // <- this will be fired on mouseout
);

where .div-class is the CSS selector for the DIV in your repeater, and .your-button-class is the CSS selector for the button you're wanting to slide down. The stop() function call will cancel any currently executing animations on the DIV, which will prevent any queueing and/or delayed executions of the slideDown and/or slideUp calls.

Hope this helps.

I have edited my question to include the code I have tried. It doesnt seem to work though. Do I need to adjust anything else? — user1266515, Jun 29 '12 at 13:14

How to apply jQuery slide down on a button when user hovers over a div element?

3 Answers3