Question

我有一些代码可以在将具有jq类的元素悬停在其上时为背景设置动画。代码选取当前背景颜色并将其设置为新颜色，然后在鼠标移出时颜色将恢复为原始颜色。如果操作一个接一个地执行得太快，代码将在元素完全恢复为原始颜色之前拾取元素的背景颜色。因此，我需要有一些类似jQuery animate函数的complete（）和if语句，但显然它对我不起作用。如何在动画完成所需的时间内禁用代码？

$(document).ready(function(){ 

            var isHovered = false; 
            $(".jq").hover( 

                 if(!isHovered) {            
                    isHovered = true;
                    function(){ 
                        var bgcol = $(this).css('backgroundColor');
                        $(this).animate({     
                            backgroundColor: "#DDD",
                            color:"#111"
                        }, trans).data('hoverbackground', bgcol);
                    },
                    function() {      
                        $(this).animate({
                            backgroundColor: $(this).data('hoverbackground'),
                            //backgroundColor: "#EFEFEF",
                            color:"#888"
                         }, trans, complete: function() {
                         isHovered = false;}).removeData('hoverbackground');
                    }
                  });                         
                });

Answer 1

我已经整理出来，部分解决了这个问题。在动画结束之前，行为将被删除，但通过引用函数中的任何jq分类元素，可以使一个元素的isHovered影响紧随其后的任何其他元素。换句话说，该函数不区分动画完成的元素。

 $(".jq").hover( 


                function(){ 

                    if(!isHovered) { 
                     isHovered = true;
                        var bgcol = $(this).css('backgroundColor');
                        $(this).animate({     
                            backgroundColor: "#DDD",
                            color:"#111"
                        }, trans).data('hoverbackground', bgcol);
                }},
                function() {   

                    $(this).animate({
                        backgroundColor: $(this).data('hoverbackground'),
                        //backgroundColor: "#EFEFEF",
                        color:"#888"
                    }, trans, function() {
                    isHovered = false;}).removeData('hoverbackground');

               });   

    });

jQuery动画 - 禁用直到完成

1 个答案: