jQuery鼠标悬停功能对多个元素有延迟

Question

我有3个跨度包裹在一个div。 当用户在潜水中盘旋时，我希望每个跨度稍微向右移动，每个跨度之间延迟0.5秒。

这是我目前的代码：

$('.library_vid').mouseover(function(){
    $(this).find('.lesson_meta span:nth-child(1)').css('margin-right', '30px');
    setTimeout(function () {
        $(this).find('.lesson_meta span:nth-child(2)').css('margin-right', '30px');
    }, 500);
    setTimeout(function () {
        $(this).find('.lesson_meta span:nth-child(3)').css('margin-right', '30px');
    }, 1000);

})

然而，目前这只是移动第一个跨度，延迟永远不会有任何意义

Answer 1

你可以用css做到这一点，如果这让你更容易。

.library_vid:hover .lesson_meta span:nth-child(1) {
    margin-right: 30px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.library_vid:hover .lesson_meta span:nth-child(2) {
    margin-right: 30px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.library_vid:hover .lesson_meta span:nth-child(3) {
    margin-right: 30px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

这是jsfiddle链接

https://jsfiddle.net/jpju2my1/

我不知道你的html是如何格式化的，所以我根据你所描述的内容制作了一些内容

Answer 2

 $('.library_vid').mouseover(function() { var parent = $(this) parent.find('.lesson_meta span:nth-child(1)').css('margin-left', '30px'); setTimeout(function() { parent.find('.lesson_meta span:nth-child(2)').css('margin-left', '30px'); }, 500); setTimeout(function() { parent.find('.lesson_meta span:nth-child(3)').css('margin-left', '30px'); }, 1000); }) 

 div { width: 130px; height: 300px; } span { height: 100px; width: 100px; display: inline-block; } .span1 { background-color: green; } .span2 { background-color: blue; } .span3 { background-color: purple; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="library_vid"> <div class="lesson_meta"> <span class="span1"></span> <span class="span2"></span> <span class="span3"></span> </div> </div> 

我认为问题是$(this)嵌套在你的设置超时中。 将其声明为变量是一种常见的“欺骗”。 另外，你说你想把它们移到右边，但是在右边增加了边距

Answer 3

jquery animate Jquery Animate会帮助而不是使用setTimeout，你可以设置时间间隔或使用默认的时间间隔，如下面的那个慢

 // Add your javascript here $(function(){ $('.library_vid').mouseover(function(){ $(this).find(".lesson_meta").animate({ "margin-right": "30px" },"slow"); }); }); 

 h1 { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="library_vid"> <span class="lesson_meta">span 1</span> <span class="lesson_meta">span 2</span> <span class="lesson_meta">span 3</span> </div>