jQuery fadeTo only fires once and then never again

Question

I have a little script I'm working on as an example for someone that is presenting me with a problem I've tried to debug but don't totally understand where the problem lies.

Basically the idea is there are 3 images stacked on top of each other. Then relative to the x position of the mouse over the element it changes the opacity of any given image and updates a selection of text.

The selection of text change fires perfectly fine. However the fadeTo animation only works once per page load. Depending on where you enter with the mouse it does its action correctly but once the action is completed the fadeTo animation will never fire again.

Can someone please explain what I'm doing wrong here?

var contWidth = $('#cctImages').width();

        $("#cctImages").mousemove(function(e){
            var parentOffset = $(this).parent().offset(); 
            var relX = e.pageX - parentOffset.left;

            var xPercent = relX/contWidth;
            xPercent = xPercent.toFixed(2);

            console.log("Percent moved: " + xPercent);

           if(xPercent < 0.33){
                threeKImage();
           }

           if(xPercent > 0.34 && xPercent < 0.65){
                fourKImage();
           }

           if(xPercent > 0.66){
                fiveKImage();
           }
        });

        function threeKImage(){
            $('#threek').fadeTo(456,1);
            $('#fourk').fadeTo(456,1);
            $('#fivek').fadeTo(456,1);
            $('#cctValue').text('3000k');
            console.log("Show three k image");
        }

        function fourKImage(){
            $('#threek').fadeTo(456,0);
            $('#fourk').fadeTo(456,1);
            $('#fivek').fadeTo(456,1);
            $('#cctValue').text('4000k');
            console.log("Show four k image");
        }

        function fiveKImage(){
            $('#threek').fadeTo(456,0);
            $('#fourk').fadeTo(456,0);
            $('#fivek').fadeTo(456,1);
            $('#cctValue').text('5000k');
            console.log("Show five k image");
        }

I know it's a bit messy because it's a prototype example and I haven't gone back in to clean anything else up yet.

Answer 1

After further fiddling with this I was able to find the solution myself.

While some jQuery functions have their execution automatically interrupted or executions can be stacked asynchronously in such a way that starting a new function on an element mid animation/modification will just modify it from that point the same logic does not seem to apply to fadeTo() .

For this reason you have to interrupt the execution yourself that may be happening to any given element and the begin a new fadeTo() animation.

I found the solution looking at this question: jQuery stop fadeTo effect here on StackOverflow.

Here is the complete documentation on the .stop function in jQuery: https://api.jquery.com/stop/