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函数的执行会自动中断，或者可以异步堆叠执行，以至于在动画/修改中期在元素上启动新函数只会从那一点修改它，但似乎不适用相同的逻辑fadeTo()。

因此，您必须自己中断可能在任何给定元素上发生的执行，并开始新的fadeTo()动画。

我在以下问题上找到了解决方案：jQuery stop fadeTo effect在StackOverflow上。

这是有关jQuery中.stop函数的完整文档：https://api.jquery.com/stop/

jQuery fadeTo仅触发一次，然后不再触发

1 个答案: