CODEWITHSUNDEEP
javascriptjquerycss
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery mouseover function on multiple elements with a delay

I have 3 spans wrapped in a div. When a user hovers over the dive, I want each span to move slightly to the right, with a delay of .5s between each.

Here is my current code:

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

})

However, currently this just moves the first span, the delay never amounts to anything

Upvotes: 1

Views: 133

Answers (3)

cup_of
cup_of

Reputation: 6687

you can probably do this with css if that makes it easier for you.

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

here is the jsfiddle link

https://jsfiddle.net/jpju2my1/

i dont know how your html is formatted so i just made some stuff up based on what you were describing

Upvotes: 1

Theophilus Omoregbee
Theophilus Omoregbee

Reputation: 2503

jquery animate Jquery Animate would help out instead of using setTimeout , you can set the time interval or use the default timing intervals ,like the one below slow

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

Upvotes: 1

larz
larz

Reputation: 5766

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

I think the issue was the $(this) nested within your set timeouts. Declaring it as a variable is a common 'cheat'. Also, you said you wanted to move them to the right, but were adding margin on the right

Upvotes: 1

Related Questions