jQuery fadeTo срабатывает только один раз, а потом никогда

Question

У меня есть небольшой сценарий, над которым я работаю в качестве примера для того, кто представляет мне проблему, которую я пытался отладить, но не до конца понимаю, в чем проблема.

В основном Идея состоит в том, чтобы 3 изображения были сложены друг на друга. Затем относительно положения x мыши над элементом он изменяет непрозрачность любого заданного изображения и обновляет выделенный текст.

Выбор изменения текста срабатывает совершенно нормально. Однако анимация fadeTo работает только один раз на загрузку страницы. В зависимости от того, где вы вводите мышью, она выполняет свои действия правильно, но после завершения действия анимация fadeTo больше никогда не сработает.

Может кто-нибудь объяснить, что я здесь делаю неправильно?

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");
        }

Я знаю, что это немного грязно, потому что это пример прототипа, и я пока не возвращался, чтобы что-нибудь еще почистить.

Answer 1

После дальнейших попыток я смог сам найти решение.

В то время как некоторые функции jQuery выполняют свое выполнение автоматически, или их выполнение может быть асинхронно составлено таким образом, что запуск новой функции на анимация / модификация элемента середины просто изменит его с этой точки, и тот же лог c, кажется, не применим к fadeTo().

. По этой причине вам придется прервать выполнение себя, которое может происходить с любой заданный элемент и начало новой fadeTo() анимации.

Я нашел решение, глядя на этот вопрос: jQuery остановка эффекта fadeTo здесь, в StackOverflow.

Вот полная документация по функции .stop в jQuery: https://api.jquery.com/stop/