Question

我想在悬停功能上更改背景颜色，但我希望以慢动作显示。此外，我在悬停时添加一些CSS属性，并希望删除并悬停。但是我的功能根据我的要求不起作用。

$(function (){

      $('.box').hover(function (){

          $('body').css({'background-color':'black'})

          $(this).css('-moz-transition', 'opacity .3s')
          $(this).css('-webkit-transition', 'opacity .3s')
          $(this).css('-o-transition', 'opacity .3s')
          $(this).css('-ms-transition', 'opacity .3s')

          }, function () {

              $('body').css({'background-color':'black'})

              $(this).remove('-moz-transition','none')

              })


      })

Answer 1

我还不知道这个功能，但你的悬停功能有一些错误。摆脱：

  $(this).css('-moz-transition', 'opacity .3s')
  $(this).css('-webkit-transition', 'opacity .3s')
  $(this).css('-o-transition', 'opacity .3s')
  $(this).css('-ms-transition', 'opacity .3s')

不应该这样分配。而是在css中为.box分配这些属性。

当您添加转换属性时，请删除不透明度并将-duration添加到transition的末尾，以便最终添加内容如下所示：-moz-transition-duration: 3s

您是否要在悬停时更改文档body background-color属性或.box background-color属性？我有点困惑。

如果更改在身体背景上，则此处为fiddle

Answer 2

可以使用Jquery UI完成颜色转换。 Here's the demo.

如何在fadeIn效果中显示bg颜色并使用jQuery删除样式属性

2 个答案: