-1

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).

user9008471
  • 11
  • 1
  • 5
  • See: http://api.jquery.com/show/ – Tameem Safi May 17 '19 at 19:20
  • I want to see their code, not the documentation. That SHOULD be easy, right? – user9008471 May 17 '19 at 19:20
  • Yes the code is public on github. – Tameem Safi May 17 '19 at 19:22
  • Tameem, I reference a link to the code right in the question. WHERE IS THE SHOW FUNCTION IN THE CODE? – user9008471 May 17 '19 at 19:24
  • Sorry I changed the link, Please see the new one. (https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/src/css/showHide.js#L83) – Tameem Safi May 17 '19 at 19:25
  • ok, sorry, I see it. so any comments on what I'm not getting about javascript, how functions are defined? – user9008471 May 17 '19 at 19:26
  • Yes the function is defined the same way, it is called `showHide`. However, jQuery has its own way of extending the object using `jQuery.fn.extend` which allows you to use the function directly like `jQuery('.test').show()` or chain it like `$('.test').show().hide()`. – Tameem Safi May 17 '19 at 19:27
  • I see, thanks. Any experience with applying css style changes, followed by style.transition? – user9008471 May 17 '19 at 19:30
  • You can just do `element.style.display = 'block';` if you want do it it in vanilla js. `style.transition` is just another css property that you are setting. I think maybe try using a javascript animation library if you need more flexibility. See: https://animejs.com/ – Tameem Safi May 17 '19 at 19:36

1 Answers1

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.

dejakob
  • 2,062
  • 14
  • 21
  • Thanks, you're not understanding quite right. I apply a bunch of css style changes, SUCH AS opacity, top, left, width, eight, AND then set the transition, and if I don't set the transition time long enough, like 50-100ms, I don't get the transitionstart/run events. E.g. I can't set a transition time like 10ms. It's weird, I don't totally understand it. – user9008471 May 17 '19 at 19:33
  • Would you mind sharing some example code in your question? – dejakob May 17 '19 at 19:39
  • It's hard to extract out, let me see if I can get setting display to block to work or using the jquery show function, to cause the events to fire right – user9008471 May 17 '19 at 20:35