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不会，无法，不使用a suitable plug-in或jQuery UI library动画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 Fiddle demo

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" });
        }
    );
});

Answer 3

删除动画

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

更好的方法是更改选择器的类

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

Answer 4

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

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

jQuery悬停div

4 个答案: