jQuery背景颜色动画切换

Question

我试图切换背景颜色点击（与表单slideToggle），但第一次单击隐藏元素（＃opt4），而不是更改颜色的动画。我究竟做错了什么？

注意：当我运行单个背景动画时，而不是切换，它没有问题。不过，我想在用户再次点击链接时删除颜色。

$(document).ready(function() { 

      $('#contact form').hide(); 

      $('a#opt4').click(function(e) { 
       e.preventDefault(); 

       $('#contact form').slideToggle(); 

       $(this).toggle(function() { 
        $(this).animate({ 
         backgroundColor: "#99ccff"},500); 
        }, 
        function() { 
         $(this).animate({ 
         backgroundColor: "none"},500); 
        }); 

      }); 
     }); 

Answer 1

什么版本的jQuery您使用的是

？截至jQuery 1.8 .toggle()已被弃用，并且1.9 .toggle()被删除。

正因如此，人们对toggle animation与toggle event相同并不感到困惑。

注意：此方法签名在jQuery 1.8中被弃用，并且在jQuery 1.9中被删除了 。 jQuery还提供了一种名为 .toggle()的动画方法，用于切换元素的可见性。 动画或事件方法是否被触发取决于通过的参数 的设置。

如果您使用的是1.9或更高版本，您可以尝试编写自己的切换功能。当然，这种方法是基本的，可以建立在这个基础之上。

$.fn.toggleState = function (even, odd) { 
    this.toggled = this.data('toggled') || false; 

    if (!toggled) { 
     if (typeof even === 'function') { 
      even(this); 
     } 
    } else { 
     if (typeof odd === 'function') { 
      odd(this); 
     } 
    } 

    this.data({ toggled: !this.toggled }); 
}; 

哪些可以像使用，这样

$('a#opt4').click(function (e) { 
    e.preventDefault(); 

    $(this).toggleState(function (el) { 
     el.animate({ 
      backgroundColor: "#99ccff" 
     }, 500); 
    }, function (el) { 
     el.animate({ 
      backgroundColor: "none" 
     }, 500); 
    }); 
}); 

$.fn.toggleState = function (even, odd) { 
    this.toggled = this.data('toggled') || false; 

    if (!this.toggled) { 
     if (typeof even === 'function') { 
      even(this); 
     } 
    } else { 
     if (typeof odd === 'function') { 
      odd(this); 
     } 
    } 

    this.data({ toggled: !this.toggled }); 
}; 

检查它在这个JSFiddle

只是一个侧面说明，你也可以使用jQueryUI的动画背景色。演示中使用了哪些内容。

Answer 2

使用类来做到这一点...

在CSS：

.active-link{ 
     background-color: #99ccff; 
    -moz-transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
} 

在您的JS：

$(this).toogleClass("active-link"); 

Answer 3

从这里的文件你不能动画背景颜色。

从文档

背景颜色不能 - 动画 - ，除非使用jQuery.Color（）插件）

我没有使用它，但这里是他们提到的颜色插件。

https://github.com/jquery/jquery-color/