jquery - ユーザーがdiv要素にカーソルを合わせたときにボタンにjQueryスライドダウンを適用する方法は?

Question

div でラップされたリピーター コントロールがあるビューがあります。ユーザーがこのdivにカーソルを合わせたときにボタンを下にスライドさせたいと思います。

jQueryスライドダウンを使用してこれを達成するにはどうすればよいですか??

ありがとう

<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>

スライドダウンを適用したい div 要素は次のとおりです。

<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>

onmouseover/hover を適用したいリピーター div Id は次のとおりです。

<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');
  }
);

1つ目の機能は「マウスエンター」イベントです。2つ目の機能は「マウス離れ」イベントです。詳細はこちら: http://api.jquery.com/hover/

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

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

Answer 2

マークアップがどのように見えるかがわからない場合、必要な適切なセレクターを理解するのを助けることは困難ですが、最終的には次のようになります。

$('.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
);

は.div-classリピーターの DIV.your-button-classの CSS セレクターであり、スライド ダウンするボタンの CSS セレクターです。関数呼び出しは、DIV で現在実行中のアニメーションをキャンセルします。これにより、および/または呼び出しstop()のキューイングおよび/または遅延実行が防止されます。slideDownslideUp

お役に立てれば。

Answer 3

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

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