延遲多個元素的jQuery鼠標懸停功能

我有3個跨度包裹在一個div中。當用戶懸停在潛水中時，我希望每個跨度稍微向右移動，每個跨度之間延遲0.5秒。延遲多個元素的jQuery鼠標懸停功能

這裏是我當前的代碼：

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

})

然而，目前這只是移動第一跨度，延遲永遠一事無成

來源

2016-08-02 Sam Skirrow

你需要小心和清除'setTimeouts'。因爲您每次觸發事件時都會創建兩個新的。請注意，您可以使用['.delay（）']（https://api.jquery.com/delay/） –

$('.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)。將它聲明爲變量是一種常見的「欺騙」。另外，你說你想把它們移動到右邊，但是在右邊添加了保證金

來源

2016-08-02 21:45:10 larz

完美 - 不知道「共同作弊」的作品非常棒 - 謝謝 –

你也許可以用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是如何格式化，所以我只是做了一些東西了根據你描述

來源

2016-08-02 21:45:05

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>

來源

2016-08-02 21:50:52

延遲多個元素的jQuery鼠標懸停功能

回答

相關問題