Question

我有一个span元素：

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

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

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

我已经尝试过fadeIn和fadeOut的多种变体..上面的当前版本似乎没有做任何事情......最好的方法来做到这一点来获得欲望的结果？感谢

Answer 1

您可能想要使用animate。它会在指定的时间范围内将给定值缓慢的css属性更改为给定值。 FadeIn / FadeOut仅处理opacity和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插件。

jquery fadeIn fadeOut效果

2 个答案: