jQuery Mouseover-Funktion auf mehrere Elemente mit einer Verzögerung

Question

Ich habe 3 Spannen in einem Div gewickelt. Wenn ein Benutzer über den Tauchgang schwebt, möchte ich, dass sich jeder Bereich leicht nach rechts bewegt, mit einer Verzögerung von jeweils 0,5 Sekunden.

Hier ist mein aktueller Code ist:

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

}) 

jedoch zur Zeit diese bewegt sich nur die erste Spanne, die Verzögerung beträgt nie

Answer 1

beschreiben wurden

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

Ich denke, das Problem war die $(this) verschachtelte innerhalb Ihrer festgelegten Timeouts. Es als eine Variable zu deklarieren ist ein üblicher "Cheat". Sie haben auch gesagt, dass Sie sie nach rechts verschieben möchten, aber fügen Sie Marge auf der rechten Seite

Answer 2

zu etwas können Sie wahrscheinlich dies mit CSS tun, wenn das macht es einfacher für Sie.

.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; 
} 

Hier ist die jsfiddle Link

https://jsfiddle.net/jpju2my1/

ich weiß nicht, wie Sie Ihre HTML so nur ein paar Sachen up gemacht i formatiert ist auf das, was Sie

Answer 3

jquery animieren Jquery Animate würde helfen, anstelle von setTimeout, können Sie das Zeitintervall festlegen oder verwenden Sie die Standard-Timing-Intervalle, wie die unter langsam

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