0

在某些网站上，我看到了这种效果：如果我悬停某些菜单背景颜色不会立即改变，但它会在某个特定时间改变并且看起来像动画，我怎样才能获得这种效果？

4

6 回答 6

4

这可以通过 css3 transition（没有 javascript）轻松完成，或者在旧浏览器上对特定属性进行动画处理

例如http://jsbin.com/ulayum/3/edit

a {
   color: 000;
   -webkit-transition: color 2s;
   -msie-transition: color 2s;
   -moz-transition: color 2s;
   -o-transition: color 2s;
   transition: color 2s;
}

a:hover {
   color: #ccc; 
}
于 2012-09-26T14:55:15.830 回答
2

您要研究的是CSS 过渡效果。谷歌搜索结果

看看这个基本的jsFiddle当你悬停时，背景颜色会变成红色。

CSS

div{ 
    background-color: blue;
    -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
}
于 2012-09-26T14:56:06.750 回答
0

这可能是您正在寻找的

$("div").hover(function () {
      $(this).effect("highlight", {}, 3000);
});
于 2012-09-26T14:53:33.897 回答
0

您可以使用 javascript 的“setTimeout”函数为效果添加延迟.. 像

使用 jquery 悬停事件的伪代码：

.... .hover(function() {

      //on mouseover
      setTimeout(FunctionThatDoesSomethingCool(), 3000); //3000 = delay/milliseconds
},
function() {
       //mouseout
}
}); //end hover event
于 2012-09-26T14:53:46.173 回答
0

我认为您正在寻找的是像这样的插件，所以看看：hoverintent

于 2012-09-26T14:53:58.887 回答
0 
$(selector).mouseover(function(){
 // change color   
}).delay('time');
于 2012-09-26T14:54:19.903 回答