CODEWITHSUNDEEP
javascriptjquery
Tyler
Tyler

Reputation: 874

jQuery Animate Queue False Not Working

I've tried multiple solutions browsing through StackOverflow and the predominant solution appears to be queue: false however this does not work for me.

I am simply trying to get .cover and .controls to animate at the same time whilst the start and finished result is correct, the animation is not.

$(".cover .controls .scale").click(function() {
  $(".currently_playing .cover").animate({
    height: "50px",
    width: "50px",
    margin: "20px 80px 0 80px"
  }, {
    queue: false
  });
  $(".currently_playing .cover .controls").animate({
    height: "50px",
    width: "50px"
  }, {
    queue: false,
  });
});
.currently_playing .cover {
  float: left;
  margin: 20px 20px 5px 20px;
  height: 210px;
  width: 210px;
}
.currently_playing .cover img {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.currently_playing .cover .controls {
  position: absolute;
  height: 210px;
  width: 210px;
  z-index: 9999;
}
.currently_playing .cover .controls:hover {
  background: rgba(0, 0, 0, 0.75);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.currently_playing .cover .controls .scale {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30px;
  width: 30px;
  background: url(http://i743.photobucket.com/albums/xx78/MrTIMarshall2512/artwork_scale_zps1ztoz3qv.png) no-repeat;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="currently_playing">
  <div class="cover">
    <div class="controls">
      <div class="scale"></div>
    </div>
    <img src="http://www.at40.com/cimages/var/plain_site/storage/images/repository/news/music-news/new-album-art-released-for-bruno-mars-unorthodox-jukebox/224005-1-eng-US/New-Album-Art-Released-For-Bruno-Mars-Unorthodox-Jukebox.jpg" alt="Bruno Mars, Unorthodox Jukebox album artwork">
  </div>
</div>

Upvotes: 0

Views: 269

Answers (1)

DaniP
DaniP

Reputation: 38252

Your problem can be solved making some changes to the CSS, don't animate both elements just the parent cover:

$(".cover .controls .scale").click(function() {
  $(".currently_playing .cover").animate({
    height: "50px",
    width: "50px",
    margin: "20px 80px 0 80px"
  });
});
.currently_playing .cover {
  float: left;
  margin: 20px 20px 5px 20px;
  height: 210px;
  width: 210px;
  position: relative;
}
.currently_playing .cover img {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.currently_playing .cover .controls {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 9999;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.currently_playing .cover .controls:hover {
  background: rgba(0, 0, 0, 0.75);
}
.currently_playing .cover .controls .scale {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30px;
  width: 30px;
  background:url(images/temp/artwork_scale.png) no-repeat;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="currently_playing">
  <div class="cover">
    <div class="controls">
      <div class="scale"></div>
    </div>
    <img src="http://www.at40.com/cimages/var/plain_site/storage/images/repository/news/music-news/new-album-art-released-for-bruno-mars-unorthodox-jukebox/224005-1-eng-US/New-Album-Art-Released-For-Bruno-Mars-Unorthodox-Jukebox.jpg" alt="Bruno Mars, Unorthodox Jukebox album artwork">
  </div>
</div>

Upvotes: 2

Related Questions