jQuery .show() - Chrome vs. IE 11

I'm using this code within a jQueryAJAX` 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: enter image description here
  • in IE 11 the same method adds display: inline: enter image description here

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!

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


Related Articles