CODEWITHSUNDEEP
jquery
reizer
reizer

Reputation: 253

Loading bar inside Jquery keep moving after 100%

I'm trying to start loading bar on page 4, but it keeps going beyond 100% messing with the layout. If I take the bar loading function away on page 1, it works fine. Maybe I need to close that animation function somehow?

http://jsfiddle.net/reizer/9w6vu7f1/

$('#cnt2, #cnt3, #cnt4, #cnt5').hide();
$('.button').click(function() {
//code
var curr = $(".question:visible");
var next = curr.next(".question");
next.delay(300).fadeIn(300);
curr.fadeOut(300);
if (!next.next(".question").length) {
  //Begin Bar Transition
  $(".button").hide(function() {
    $("#bar").width(0);
    $("#bar").delay(500).animate({
      width: '+=50%'
    }, 'slow').delay(600).animate({
      width: '+=20%'
    }, 'slow').delay(60).animate({
      width: '+=10%'
    }).delay(2000).animate({
      width: '+=20%'
    }, 'slow');
  });
}
});
* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    list-style-type: none;
}
body {
    background-color: #333;
}
#wrapper {
    background-color: #666;
    margin: 1em;
    padding: 1em;
    border: 1px solid #757575;
    overflow: hidden;
}
.question {
    height: 300px;
    background-color: #FFF;
    padding-right: 1em;
    padding-left: 1em;
}
#table {
    display: table;
    width: 100%;
    margin-top: 0.5em;
}
#row {
    display: table-row;
}
.button {
    background: rgba(148, 190, 22, 1);
    background: -moz-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 190, 22, 1)), color-stop(100%, rgba(118, 157, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#94be16', endColorstr='#769d00', GradientType=0);
    cursor: pointer;
    text-align: center;
    display: table-cell;
    padding: 1em;
    color: #FFF;
}
.button:focus, .button:hover {
    background: rgba(168, 216, 22, 1);
    background: -moz-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(168, 216, 22, 1)), color-stop(100%, rgba(130, 173, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a8d816', endColorstr='#82ad00', GradientType=0);
}
.last {
    border-color:#666;
    border-style:solid;
    border-width:0 0 0 1px
}
#bar {
    background-color: #3C0;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="cnt" class="question">this is content of page 1
    <br>
  </div>
  <div id="cnt2" class="question">this is content of page 2</div>
  <div id="cnt3" class="question">this is content of page 3</div>
  <div id="cnt4" class="question">this is content of page 4
    <br>
    <div id="bar"></div>
  </div>
  <div id="table">
    <div id="row">
      <div class="button">CLICK HERE</div>
      <div class="button last">CLICK HERE</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 44

Answers (1)

T J
T J

Reputation: 43166

Since $(".button") has more than 1 match the callback passed to $('.button').hide(); will run multiple times, extending the bar beyond 100%

Simply moving the code for extending progress bar outside the callback will solve the issue:

$('#cnt2, #cnt3, #cnt4, #cnt5').hide();
$('.button').click(function() {
  //code
  var curr = $(".question:visible");
  var next = curr.next(".question");
  next.delay(300).fadeIn(300);
  curr.fadeOut(300);
  if (!next.next(".question").length) {
    //Begin Bar Transition
    $('.button').hide();
    $("#bar").width(0);
    $("#bar").delay(500).animate({
      width: '+=50%'
    }, 'slow').delay(600).animate({
      width: '+=20%'
    }, 'slow').delay(60).animate({
      width: '+=10%'
    }).delay(2000).animate({
      width: '+=20%'
    }, 'slow');
  }
});
* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  list-style-type: none;
}
body {
  background-color: #333;
}
#wrapper {
  background-color: #666;
  margin: 1em;
  padding: 1em;
  border: 1px solid #757575;
  overflow: hidden;
}
.question {
  height: 300px;
  background-color: #FFF;
  padding-right: 1em;
  padding-left: 1em;
}
#table {
  display: table;
  width: 100%;
  margin-top: 0.5em;
}
#row {
  display: table-row;
}
.button {
  background: rgba(148, 190, 22, 1);
  background: -moz-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 190, 22, 1)), color-stop(100%, rgba(118, 157, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
  background: -ms-linear-gradient(top, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(148, 190, 22, 1) 0%, rgba(118, 157, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#94be16', endColorstr='#769d00', GradientType=0);
  cursor: pointer;
  text-align: center;
  display: table-cell;
  padding: 1em;
  color: #FFF;
}
.button:focus,
.button:hover {
  background: rgba(168, 216, 22, 1);
  background: -moz-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(168, 216, 22, 1)), color-stop(100%, rgba(130, 173, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
  background: -ms-linear-gradient(top, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(168, 216, 22, 1) 0%, rgba(130, 173, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a8d816', endColorstr='#82ad00', GradientType=0);
}
.last {
  border-color: #666;
  border-style: solid;
  border-width: 0 0 0 1px
}
#bar {
  background-color: #3C0;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="cnt" class="question">this is content of page 1
    <br>
  </div>
  <div id="cnt2" class="question">this is content of page 2</div>
  <div id="cnt3" class="question">this is content of page 3</div>
  <div id="cnt4" class="question">this is content of page 4
    <br>
    <div id="bar"></div>
  </div>
  <div id="table">
    <div id="row">
      <div class="button">CLICK HERE</div>
      <div class="button last">CLICK HERE</div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions