Question

如何每次只为一个元素（div）制作动画，具有类.box并且不会影响具有相同类的其他元素。像这样：

$(.box).hover(function() {
        $(.box).animate({ fontSize : '2rem' });
        $(.box).removeClass("main");
        // other things...

HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

我尝试使用.next（）和.find（），但由于我在jQuery中的基本级别，我没有成功。

Answer 1

//use 'this' inside an event handler to reference the element being processed for the event
$('.box').hover(function(){
    $(this).animate(...);
    $(this).removeClass(...);
    $(this).whatever...
});

参考。 http://learn.jquery.com/events/event-basics/

Answer 2

修改

由于正确评论，此答案已被编辑。您可以尝试以下操作，以防您想要绑定不同的多个（例如mouseover focus）事件，使用.on()的好处。

＆＃13;
＆＃13;
$(".box").on({ mouseover: function() { $(this).animate({ fontSize : '2rem' }).addClass('red'); }, mouseleave: function() { $(this).animate({ fontSize : '1rem' }).removeClass('red'); } });
＆＃13;
.red { color:#f00; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div>
＆＃13;
＆＃13;
＆＃13;

如果您特别想使用.hover( handlerIn, handlerOut )，则会重写上面的代码段，就像下面的代码段一样...

请注意正在使用的handlerIn和handlerOut函数。

＆＃13;
＆＃13;
$( ".box" ).hover( function() { $( this ).animate({ fontSize : '2rem' }).addClass('red'); }, function() { $( this ).animate({ fontSize : '1rem' }).removeClass('red'); } );
＆＃13;
.red { color:#f00; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

如何制作一个简单的代码，仅为一个元素设置动画效果，而不会影响具有相同类别的其他div。

$(<selector>)

Selects elements pseudo-based on CSS and some built in keywords by the jQuery team

附加/绑定事件以订阅所选元素的所有时

$('.box').hover(function() { /* do something */ })

你基本上说当鼠标悬停任何.box类元素时执行一个函数。 jQuery将设置一个上下文，其中事件以this的值绑定为原始html元素（不是jQuery对象）作为特征。（您可以阅读有关this here）的更多信息。 jQuery的选择器引擎还提供了一种将转换原始html元素转换为jQuery对象的方法，只需将它们作为选择器$(this)传递即可。因此有些简单如下：

＆＃13;

$(document).ready(function(){
  $('.box').hover(
    function() { $(this).addClass('is-hover'); },
    function() { $(this).removeClass('is-hover'); });
});

＆＃13;

.box{border: 4px solid transparent}
.box.is-hover{border-color: red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Test</div>
<div class="box">Test</div>
<div class="box">Test</div>
<div class="box">Test</div>

＆＃13;

用$(this)替换$('.box')正在执行一个新查询来查找带有框类的所有元素，因此它将影响具有框类的所有类：

＆＃13;

$(document).ready(function(){
  $('.box').hover(
    function() { $('.box').addClass('is-hover'); },
    function() { $('.box').removeClass('is-hover'); });
});

＆＃13;

.box{border: 4px solid transparent}
.box.is-hover{border-color: red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Test</div>
<div class="box">Test</div>
<div class="box">Test</div>
<div class="box">Test</div>

＆＃13;

如果您想以更有经验的开发人员考虑最佳实践的方式执行此操作，那么您甚至不会使用jQuery。

＆＃13;

.box {
font-size:1rem;
transition: font-size .4s linear;
}
.box:hover {
color:red;
font-size: 2rem;
}

＆＃13;

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

＆＃13;

仅对一个元素悬停效果而不影响其他元素

3 个答案: