jQuery具有显示功能。 当我尝试在他们的代码中找到它时，我找不到。 关于javascript我不了解什么？

Question

I'd like to know what the jquery show() function does, but cannot find it in their source. Can you please explain where it is, and what I need to understand better about javascript to be able to, or to have found it?

I've looked in their source, which is here:

https://code.jquery.com/jquery-3.4.1.js

And searching "show(" doesn't find it. Neither does searching on "function show"

I want to do the straight equivalent in direct javascript css, that's my goal.

As far as I can tell, I'm encountering the problem described with Chrome described in the the first answer here:

Proper way to reset a GIF animation with display:none on Chrome

I put in a bunch of css changes, and the css transitionrun and transitionstart events don't fire as expected, perhaps queued up as this answer says. So, I'm trying to find out what show() does, so I can ideally just do it directly with javascript/css. (and just to be clear, I'm not dealing with GIF. I'm applying a bunch of css changes, then setting style.transition, and am having plenty of timing problems, the events not firing as expected. So, what does jquery show do (ideally cause the Chrome queue to finish and fire the events right).

Answer 1

To your question where can I find this? , I found this:

jQuery.fn.extend( {
    show: function() {
        return showHide( this, true );
    },

The showHide method will remove display styling from an element (and hide will set display: none

You cannot set a CSS transition for the display property. There are other options, like transitioning from opacity: 0 to opacity: 1 . You can add another class with JavaScript to the element.

.element { opacity: 0; transition: opacity 0.4s; }
.element--show { opacity: 1; }

Since you're using jQuery, the easiest way is probably using jQuery's .fadeIn method for a fade animation. However, this is not the best solution when it comes to performance.