JQuery v1.11 and v2.1 slideUp and slideDown not taking css display property into account

I noticed that after upgrading from jQuery version 1.9 to version 1.11 behavior such as methods slideUp, slideDownand slideTogglechanged when applied to the unblocked elements (ie span) that matter the css display. In previous versions, such as v1.9, the value displaywould be set (after the animation has completed) according to what we specified in our CSS definition . In versions 1.11 and 2.1, the value is displaynot respected this way (at least not for non-blocking elements).

Is this a new bug in jQuery 1.11 and 2.1? I saw that in older versions of jQuery, other people reported similar issues like this and this . It seems that these problems were fixed as fixed, and in our experience with jQuery 1.9 this was so. But it looks like it is broken again in 1.11 and 2.1. Here is a simple reproducible example:

HTML:

<span class="b">block</span> <!-- notice this is not a block-level element... -->
<a href="#" class="toggle">toggle it</a>

CSS

.b {
    display:block; /* ... but I need it to display like a block-level element */
    background:red;
}

JavaScript:

var isExpanded = true;

$(".toggle").bind("click", function(){
    if(isExpanded) {   
        $(".b").slideUp();
        isExpanded = false;
    }
    else {
        $(".b").slideDown();
        isExpanded = true;
    }    
});

See how this works in this jsFiddle example , which uses jQuery 1.9.

This leads to the expected result when switching:

result 1

Unfortunately, jQuery version 1.11 (or 2.1) does not match our value display, instead setting it to inline-block:

enter image description here

jsFiddle, , , jQuery.

jQuery, , ? , , , , ...

" , ".

. , span div , , span, (.. div span), .

+3
2

jQuery, , . , 30 2014 1.11.1/2.1.1 ( , ).

0

display auto. css

width: 100%;
0

All Articles