jQuery .show（） - Chrome与IE 11

Question

我在jQuery AJAX`请求中使用此代码：

beforeSend: function() {
    loading.show();
},
complete: function(){
    loading.hide();
}

loading看起来就像这样：var loading = form.siblings("img")。

css的{​​{1}}是：

loading

代码工作正常，Chrome和IE 11之间存在轻微的不一致：

• 在Chrome中，display: none; margin: 10px auto; width: 30px; height: auto; 将.show()添加到display: block元素，允许loading居中：
在IE 11中，
• 使用相同的方法添加.gif：

有没有办法直接在display: inline内更改此行为，而不必在jQuery方法之后强制.css("display", "block")？这样做会有什么陷阱？

非常感谢！

Answer 1

尝试用.css(propertyName, function)代替.show()，.hide()

var toggle = function toggle() {
  loading.css("display", function(index, display) {
    return display === "none" ? "block" : "none"
  })
};

beforeSend: function() {
  toggle()
},
complete: function(){
  toggle()
}

＆＃13;

＆＃13;

$(function() {
  var loading = $("img");
  var toggle = function toggle() {
    loading.css("display", function(index, display) {
        return display === "none" ? "block" : "none"
    })
  }
  $("button").click(function() {
    toggle()
  })
})

＆＃13;

img {
  display: none;
  margin: 10px auto;
  width: 16px;
  height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>click</button>
<img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==">

＆＃13;

＆＃13;

＆＃13;