jquery - jquery fadeIn 淡出效果

Question

我有一个跨度元素：

<span id="signInResult" style="border: 1px solid white;">html in here</span>

当 jquery ajax 成功触发时，我希望 span 立即变为绿色，然后淡出回默认的白色：

success: function(msg){
  $("#signInResult").css('border-style', 'solid');
  $("#signInResult").css('border-color', 'green');
  $("#signInResult").fadeIn(300).css('border-color', 'white').fadeIn(300);
}

我已经尝试了许多淡入和淡出的变体.. 上面的当前版本似乎没有做任何事情.. 最好的方法是这样做以获得期望的结果？谢谢

Answer 1

您可能想使用animate. 它在指定的时间范围内将缓慢给出的 css 属性更改为给定的值。FadeIn/FadeOut 只处理opacityand display。

尝试：

success:function(msg) {
    $("#signInResult").css('border-color', '#0f0').animate({'border-color': '#fff'}, 300);
}

文档：http ://api.jquery.com/animate/

Answer 2

正如您的问题提到您想要更改边框的颜色，对于动画颜色试试这个：

http://jsbin.com/anubin/1/edit

 $(function() {
    $("#signInResult").css('border-style', 'solid');
    $("#signInResult").css('border-color', 'green');
    $("#signInResult").hide().fadeIn(300);

    $("#signInResult").animate({
        borderColor: "white",
        width: 500
      }, 1000 );
 });

jquery ui需要插件。