jQuery .show（）-Chrome与IE 11

Question

I'm using this code within a jQuery AJAX` request:

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

loading looks this way: var loading = form.siblings("img") .

And the css for loading is:

display: none;
margin: 10px auto;
width: 30px;
height: auto;

The code works just fine with a minor inconsistency between Chrome and IE 11:

• in Chrome the .show() adds display: block to the loading element allowing the .gif to be centered:
• in IE 11 the same method adds display: inline :

Is there any way to alter this behavior directly within jQuery without having to force .css("display", "block") after the .show() method? And what would be the pitfalls of doing so?

Thank you very much!

Answer 1

Try substituting .css(propertyName, function) for .show() , .hide()

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

---

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

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

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

 <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==">