pyviet pyviet - 3 months ago 7
Javascript Question

fadeIn not working after reset

The fadeIn and fadeOut work up to '#img9' after which it disappears when
instead '#img1' should fade in again. I've looked at similar questions but I can't see find the answer.

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var currentImg = 1;
$('#img1').fadeIn(300);
$('img').on('click', switchImg);

function switchImg() {
$('#img' + currentImg).fadeOut(500).delay(250, updateImg);
}

function updateImg(){
currentImg++;
if (currentImg > 9) {
currentImg = 1;
}
$('#img' + currentImg).fadeIn(500);
}
});
</script>


<div class="row">
<div class="col-md-8 col-md-offset-2" style="width:600px">
<img src="~/Content/Images/Cplusplus.jpg" class="img-responsive" style="display:none" id="img1"/>
<img src="~/Content/Images/HelloWorld.jpg" class="img-responsive" style="display:none" id="img2"/>
<img src="~/Content/Images/Java.jpg" class="img-responsive" style="display:none" id="img3"/>
<img src="~/Content/Images/KeepCalm.png" class="img-responsive" style="display:none" id="img4"/>
<img src="~/Content/Images/NodeJS.png" class="img-responsive" style="display:none" id="img5"/>
<img src="~/Content/Images/NotCalm.png" class="img-responsive" style="display:none" id="img6"/>
<img src="~/Content/Images/Python.png" class="img-responsive" style="display:none" id="img7"/>
<img src="~/Content/Images/Ubuntu.png" class="img-responsive" style="display:none" id="img8"/>
<img src="~/Content/Images/VisualStudio.jpg" class="img-responsive" style="display:none" id="img9"/>
</div>



Answer

Not sure why but removing the delay solves the problem:

$('#img' + currentImg).fadeOut(500, updateImg); 

example: http://codepen.io/nilestanner/pen/YWbEgN?editors=1010

(I changed the imgs to h2 tags)

Comments