nathan hartmann nathan hartmann - 1 month ago 8
Javascript Question

Jquery, Stopped queued functions and reset to original function

So I am trying to get this function to work. I have made other functions like this before I just like to make new things just for fun. As of now I am trying to make this image that flashes out and back in as a new image. so far it works fine but the only problem is that it gets overloaded and acts funny when clicked repeatedly. I tried putting it in JSfiddle but some of the animations appeared to not make it through. regardless I was wondering if there was a way to, if you click on something and start the function again while the original time it was clicked has not finished processing through. I could stop the function and reset it back to the beginning instead of watching the image flicker again and again until it works through the amount of times it was clicked.

HTML

<div id="menuImageDiv">
<div id="menuImageLeft"><</div>
<img id="menuImage" src="pictures/gingerbread.JPG">
<div id="menuImageRight">></div>
</div>


Jquery

$(function(){
var i = 0;
var cars = ['pictures/gingerbread.JPG', 'pictures/cupcake.JPG','pictures/cake.JPG'];
var delay = 500
function startSlide(){
interval = setInterval(function(){
var menuimage=$("#menuImage")
i ++;
i = i % cars.length;
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});

}, delay*10)
}
function stopSlide(){
clearInterval(interval);
};
$("document").ready(function(){
var menuimage=$("#menuImage");
var right = $("#menuImageRight");
right.click(function(){
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
i ++;
i = i % cars.length;
console.log(i);
})
})
$("document").ready(function(){

var menuimage=$("#menuImage")
var left = $("#menuImageLeft")
left.click(function(){
menuimage.toggleClass('nopacity', delay).promise().done(function(){
menuimage.attr('src', cars[i]).promise().done(function(){
menuimage.toggleClass('nopacity', delay)
});
});
i --;
i = i % cars.length;
if (i<=-1){
i=cars.length-1;
}
})
})

startSlide();
$("#menuImageDiv").mouseenter(stopSlide).mouseleave(startSlide)
})


CSS

#menuImageDiv{
z-index:0;
position:relative;
height:500px;
width:100%;
margin: 0 auto;
top:-30px;
}
#menuImage{
width:100%;
min-height:500px;
max-height:550px;
}
#menuImageLeft{
cursor: url(http://i68.tinypic.com/2zq4h2g.jpg), auto;
margin:auto 0;
font-size:50px;
background:#3a3a3a;
padding:0 25px;
opacity:0;
top:50px;
position:absolute;
float:left;
z-index:5;
width:47%;
height:400px;
}
#menuImageRight{
cursor: url(http://i63.tinypic.com/2mni1ky.jpg), auto;
font-size:50px;
background:#3a3a3a;
padding:0 25px;
opacity:0;
top:50px;
float:right;
position:absolute;
z-index:5;
width:50%;
height:400px;
left:50%
}
.nopacity{
opacity:0;
}


https://jsfiddle.net/nathanahartmann/30d0ause/8/

P.S. I've been looking into .stopPropogation() and .stopImmediatePropogation() and .stop() and none of them have worked as desired.

Answer

Since you are using jQuery. Please look at these documentation.

jQuery Finish

jQuery Stop

Comments