jquery - jQuery悬停一个div

Question

我对 jQuery 相当陌生，我真的无法理解这一点。

我正在尝试选择<a href="contact"><div id="res">Reserveren</div></a>.

这是我的 jQuery 代码：

 $(document).ready(function() {

 $('#res').hover(
    function () {
    $(this).animate({backgroundColor: "#fff" });
    },
    function () {
    $(this).animate({backgroundColor: "#000" });
    }

  });

但是，没有任何效果。它根本没有改变任何东西......我做错了什么？

在此先感谢，巴特

Answer 1

如果不使用合适的插件或jQuery UI 库，jQuery 不会也不能动画。color

但是，您可以使用类名来利用 CSS 过渡：

$('#res').hover(
    function () {
        $(this).addClass('animating');
    },
    function () {
        $(this).removeClass('animating');
    });

使用以下 CSS：

#res { /* default styles */
    background-color: #000;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

#res.animating, /* hovered-class/animating styles */
.animating {
    background-color: #fff;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

JS 小提琴演示。

Answer 2

片段有很多问题

• 悬停功能没有右括号。
• backgroundColor不是一个属性。你会给background-color

• jquery 不支持彩色动画，请查看 jquery ui 以获得对 http://jqueryui.com/animate/的支持

  $(document).ready(function() {
       $('#res').hover(
          function () {
              $(this).animate({"font-size": "90px" });
          },
          function () {
              $(this).animate({"font-size" : "12px" });
          }
      );
  });
  

​</p>

Answer 3

$(document).ready(function() {
   $('#res').hover(
    function () {
        $(this).css('background-color' ,'#fff');
    },
    function () {
      $(this).css('background-color' ,'#000');
  })
});

或使用这个插件： http: //www.bitstorm.org/jquery/color-animation/

Answer 4

删除动画

$('#res').hover(
    function () {
        $(this).css("background","#fff");
    },
    function () {
        $(this).css("background","#000");
    }
);

更好的是更改选择器的类

$('#res').hover(
    function () {
        $(this).addClass("on");
    },
    function () {
        $(this).removeClass("on");
    }
);