0

Okay so I have some animated buttons on my webpage. Whenever you mouse over one button, the other 5 shrink and the one you moused over grows larger. When you switch buttons too quickly, it messes the sizes up. I need to figure out a way to make the animations on the next buttons wait until all the buttons are sized back to normal. Any help?

Relative code:

$(document).ready(function() {
 $("#box1").mouseenter(function() {
  $(this).animate({
   height: '+=10px'
  }, {queue: false });
  $(this).animate({
   width: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '-=10px'
  }, {queue: false });
 });
 $("#box1").mouseleave(function() {
  $(this).animate({
   height: '-=10px'
  }, {queue: false });
  $(this).animate({
   width: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '+=10px'
  }, {queue: false });
 });
 $("#box1").click(function() {
  $(this).toggle(1000);
 });
 $("#box2").mouseenter(function() {
  $(this).animate({
   height: '+=10px'
  }, {queue: false });
  $(this).animate({
   width: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '-=10px'
  }, {queue: false });
 });
 $("#box2").mouseleave(function() {
  $(this).animate({
   height: '-=10px'
  }, {queue: false });
  $(this).animate({
   width: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '+=10px'
  }, {queue: false });
 });
 $("#box2").click(function() {
  $(this).toggle(1000);
 });
 $("#box3").mouseenter(function() {
  $(this).animate({
   height: '+=10px'
  }, {queue: false });
  $(this).animate({
   width: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '-=10px'
  }, {queue: false });
 });
 $("#box3").mouseleave(function() {
  $(this).animate({
   height: '-=10px'
  }, {queue: false });
  $(this).animate({
   width: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '+=10px'
  }, {queue: false });
    $("#box6").animate({
     width: '+=10px'
  }, {queue: false });
 });
 $("#box3").click(function() {
  $(this).toggle(1000);
 });
 $("#box4").mouseenter(function() {
  $(this).animate({
   height: '+=10px'
  }, {queue: false });
  $(this).animate({
   width: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '-=10px'
  }, {queue: false });
 });
 $("#box4").mouseleave(function() {
  $(this).animate({
   height: '-=10px'
  }, {queue: false });
  $(this).animate({
   width: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '+=10px'
  }, {queue: false });
 });
 $("#box4").click(function() {
  $(this).toggle(1000);
 });
 $("#box5").mouseenter(function() {
  $(this).animate({
   height: '+=10px'
  }, {queue: false });
  $(this).animate({
   width: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '-=10px'
  }, {queue: false });
 });
 $("#box5").mouseleave(function() {
  $(this).animate({
   height: '-=10px'
  }, {queue: false });
  $(this).animate({
   width: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box6").animate({
   width: '+=10px'
  }, {queue: false });
 });
 $("#box5").click(function() {
  $(this).toggle(1000);
 });
 $("#box6").mouseenter(function() {
  $(this).animate({
   height: '+=10px'
  }, {queue: false });
  $(this).animate({
   width: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '-=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '-=10px'
  }, {queue: false });
 });
 $("#box6").mouseleave(function() {
  $(this).animate({
   height: '-=10px'
  }, {queue: false });
  $(this).animate({
   width: '-=10px'
  }, {queue: false });
  $("#box1").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box1").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box2").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box3").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box4").animate({
   width: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   height: '+=10px'
  }, {queue: false });
  $("#box5").animate({
   width: '+=10px'
  }, {queue: false });
 });
 $("#box6").click(function() {
  $(this).toggle(1000);
 });
});
1Poseidon3
  • 125
  • 1
  • 11
  • You should only call the next animation when the first one finishes, animation can't wait, but you can control when to call. Use callback for animation which means it will call a function after the current animation function complete it's operation . – Mohammed Joraid Dec 15 '15 at 22:54
  • Probably callback function or promises – TylerH Dec 15 '15 at 22:54
  • I would suggest using CSS3 with different classes :hover and *transition* – Mohammed Joraid Dec 15 '15 at 22:56

2 Answers2

2

You have a lot of code here. Instead of using id, you should use class. This lets you generalize your code. You can do all of this in a few lines.

Instead of waiting for animations to finish, simply force them to end, using .stop(true, true). The first true clears any remaining animation on the element, and the second true puts the element in the state at the end of the animation.

$(".box").mouseenter(function() {
  $(this).stop(true, true).animate({
    height: '+=10px'
  })
}).mouseleave(function() {
  $(this).stop(true, true).animate({
    height: '-=10px'
  })
});

$(".box").click(function() {
  $(this).toggle(1000);
});
.box {
  background-color: green;
  width: 100px;
  height: 30px;
  margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Jeff B
  • 29,943
  • 7
  • 61
  • 90
  • I will try this out and see how it does. I'm marking this correct because of its simplicity in answering the question. @Sherlock_HJ 's response was also a very good one that went very in-depth. I'll take both of your suggestions into consideration and see if they work. Thanks! – 1Poseidon3 Dec 16 '15 at 00:35
  • Another question I have is how would I make it so when I mouse over one box and it enlarges, the other boxes get smaller? – 1Poseidon3 Dec 16 '15 at 00:41
1

Jeff B's answer is probably the simplest way to go. Here's a full, working example that builds on that solution by including the button-shrinking effect and showing how to use adding and removing of classes to help with the selection of the other boxes: Solution JSFiddle.

$(".box").mouseenter(function() {
  $(this).stop(true, true).animate({
    height: '+=10px',
    width: '+=10px'
  });
  $(this).removeClass('unselected');
  $('.unselected').stop(true, true).animate({
    height: '-=10px',
    width: '-=10px'
  });
}).mouseleave(function() {
  $(this).stop(true, true).animate({
    height: '-=10px',
    width: '-=10px'
  })
  $('.unselected').stop(true, true).animate({
    height: '+=10px',
    width: '+=10px'
  });
  $(this).addClass('unselected');
});

$(".box").click(function() {
  $(this).toggle(1000);
});
.box {
  background-color: green;
  width: 100px;
  height: 30px;
}
.container {
  height: 50px;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>

Things to note:

  • I changed both width and height in the same call to .animate. The parameter to .animate is an object (key/value pairs), so just include the other key/value pairs.
  • The containers were added just so the buttons would stay in one place.
  • The unselected class is added to all buttons by default directly in the HTML, though it could be added with javascript on page load if you wanted.
  • The unselected class is removed on mouseenter so that we can select all boxes that do have unselected (which will not include the current one because we just removed it) and call .animate on the whole group at the same time.
  • The unselected class is then re-added on mouseleave after calling .animate on all currently unselected (all other boxes) to animate them back to normal size.
  • You can now add as many more boxes as you want, as long as they have the box and unselected class, and it will just work without having to write any new code.

Instead of putting the unselected class on everything and then removing/re-adding it on the active element, you could instead add a class on the active element on mouseenter (e.g. selected) and then select all the other boxes with $('.box').not('.selected'). Here's an example of that:

$(".box").mouseenter(function() {
  $(this).addClass('selected');
  $(this).stop(true, true).animate({
    height: '+=10px',
    width: '+=10px'
  });
  $('.box').not('.selected').stop(true, true).animate({
    height: '-=10px',
    width: '-=10px'
  });
}).mouseleave(function() {
  $(this).stop(true, true).animate({
    height: '-=10px',
    width: '-=10px'
  })
  $('.box').not('.selected').stop(true, true).animate({
    height: '+=10px',
    width: '+=10px'
  });
  $(this).removeClass('selected');
});

$(".box").click(function() {
  $(this).toggle(1000);
});
.box {
  background-color: green;
  width: 100px;
  height: 30px;
}
.container {
  height: 50px;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>
<div class="container">
  <div class="box"></div>
</div>
<div class="container">
  <div class="box"></div>
</div>
<div class="container">
  <div class="box"></div>
</div>
<div class="container">
  <div class="box"></div>
</div>
Sherlock_HJ
  • 236
  • 1
  • 5