Question

我有两个同一类的div

<a href="/News">
     <div class="menubutton" id="btnMenu" style="width: 80px;"><img src="/images/menu/Noticies.png" class="img-circle thumbnailMidSize"><span class="titleText" id="textmenu">Noticias</span></div>
</a>
<a href="/People">
     <div class="menubutton" id="btnMenu"><img src="/images/menu/Invitados.jpg" class="img-circle thumbnailMidSize"><span class="titleText" id="textmenu">Invitados</span></div>
</a>

我添加了一个动画，但只希望看到div中选择的动画不在两个div中

$(document).ready(function () {
    $(".menubutton").hover(function () {
        $(".menubutton").animate({ width: '310px' });

    });
    $(".menubutton").mouseleave(function () {
        $(".menubutton").animate({ width: '80px' });
    });
});

如何更改它以仅在一个div中查看动画？

Answer 1

你正在概括它。使用this：

$(document).ready(function () {
    $(".menubutton").hover(function () {
        $(this).animate({ width: '310px' });

    });
    $(".menubutton").mouseleave(function () {
        $(this).animate({ width: '80px' });
    });
});

此外，还有一个严重的问题，即你有两个元素重复id="btnMenu"。 id值应该是唯一的。

Answer 2

您需要使用 this 它指的是正在悬停的对象。 $( selector ).hover( handlerIn, handlerOut ) 也是 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ); 的简写，因此您可以将回调鼠标作为第二个参数。

$(document).ready(function() {
  $(".menubutton").hover(function() {
    $(this).animate({
      width: '310px'
    });
  }, function() {
    $(this).animate({
      width: '80px'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/News">
  <div class="menubutton" id="btnMenu" style="width: 80px;">
    <img src="/images/menu/Noticies.png" class="img-circle thumbnailMidSize"><span class="titleText" id="textmenu1">Noticias</span>
  </div>
</a>
<a href="/People">
  <div class="menubutton" id="btnMenu">
    <img src="/images/menu/Invitados.jpg" class="img-circle thumbnailMidSize"><span class="titleText" id="textmenu2">Invitados</span>
  </div>
</a>

注意：在您的标记中，id属性应该是唯一的。

Answer 3

您可以使用对this

的引用

$(document).ready(function () {
    $(".menubutton").hover(function () {
        $this = $(this) // This is your reference to the object being hovered on
        $this.animate({ width: '310px' });
    });

    $(".menubutton").mouseleave(function () {
        $this = $(this) // Same here
        $this.animate({ width: '80px' });
    });
});

jquery只悬停到一个div，但为所有div

3 个答案: