用jQuery和CSS隐藏元素之间有什么区别？

Question

I created something similar to slider, which has three blocks with two pictures and description in each. At the top it shows one of these blocks with its two pictures and description. At the bottom you can see previews for two other blocks without description. It looks like this (pictures are random):

http://plnkr.co/edit/o9wTYhrTnpfgXu4aEIYW?p=preview

Here it works as expected, but there is one thing I don't understand. When you click at the bottom preview, it removes description from top active pictures, and adds description to bottom inactive ones, and blocks change position. By default all the figcaptions with descriptions have class .sliderblock__caption and are hidden in css, but those with class .sliderblock__caption--active are displayed:

.sliderblock__caption{
    display: none;
}

.sliderblock__caption--active{
    display: block;
}

With css it works fine, but when I try to us js instead, it doesn't.

http://plnkr.co/edit/kpnx9oGJzvz94u7rjGTM?p=preview

I placed the same hide stuff in js-file, but it's not hiding what is expected to be hidden.

var caption = ".sliderblock__caption";
var activecaption = ".sliderblock__caption--active";

$(caption).css("display", "none");
$(activecaption).css("display", "block");

If you click on one of the bottom blocks, the block will change position, but descriptions will not.

The point is that it actually adds the "active" class to figcaptions, but it's not working. When you look at the elements in Firebug, it shows that figcaptions at the top have "active" class, but their css is following:

element.style{
    display: none;
}

Where does this rule come from? And where should I put the piece of code in js to get the same effect as with css?

Answer 1

When you do $myElm.hide() or $myElm.css("display", "none") you're setting the style attribute to display:none . That's the inline element CSS.

You can do the same using the style attribute:

<div style="display:none">

Using CSS (even you're using inline or rules in your file), doesn't require JavaScript while jQuery css method require the browser to allow executing of JavaScript.