javascript - jQuery 动画试图淡化白色边框 IN

Question

我正在尝试制作“悬停”动画，以便当用户将鼠标箭头移到图像上时，方形图像周围会出现白色边框。

$('#fbid').mouseover(  
                  function( ) 
                  {
                     alert("me");
                     $(this).animate({ "border" : "solid 2px BLACK" }, 1000);
                  }

                  );

我确实看到了显示“我”的警告窗口，但淡入淡出的过渡不起作用。

代替

"border" : "solid 2px BLACK" 

我试过了

"border-color" : "WHITE"

那也没用。

非常感谢您的帮助

Answer 1

颜色无法使用常规 jQuery 的 animate() 方法设置动画。

您必须使用 jQuery UI 为此。

PS - 我建议使用 CSS 在 :hover 规则上通过 transition 来实现这一点。

CSS

#fbid {
    -webkit-transition: border 1s ease-in;
    -moz-transition: border 1s ease-in;
    transition: border 1s ease-in;
    border: solid 2px black;
}    
#fbid:hover {
    border-color: white;
}