We Keep Coding

jquery has a show function. When I try to find it in their code, I cannot. What don't I understand about javascript?

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

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.

Attaching two separate elements to one animate script

I'm trying to get a div to change its width through hovering over it. I've got that sussed but I would also like its width to change through hovering an h5 tag which is separate. Does anyone have any ideas how to do this? Here's what I have at the moment.
$(function(){
$("#hoverbox").hover(
function(){
$(this).animate({width: '150px'});
},
function(){
$(this).animate({width: '38px'});
}
);
}};
https://jsfiddle.net/m0u8braj/5/ ... alternatively it's at http://www.cosmosdesign.co.nz/ . Also you may notice the box can act a little spastic and expand and retract numerous times, does this relate to my current code? Thanks.

I've edited your Fiddle. It now does what you desire with CSS only. No need for jQuery's .animate()
It's working like this, because CSS's :hover can affect sibling elements with the + or ~ selectors, like so:
#hoverbox:hover, h5:hover + #hoverbox{
width: 150px;
}
Hope this helps

Using CSS animations on element containing a focused input box

I am trying to use CSS animations on an element with a focused input box. My use case is a popup box with two or more pages. The "pages" are a single container that slides left/right using CSS transitions.
Everything was great until I wanted to have an input field on page 2 be focused upon navigating to that page. The entire CSS animation gets screwed up. I could try a timeout for the jQuery focus() function I'm using to focus the input box, but I don't like mixing timeouts with CSS transition times (and am guessing that isn't the proper thing to do).
I've seen this behavior in the latest Chrome/Firefox/IE, and have replicated it in this fiddle:
http://jsfiddle.net/bmh5g/40/
If you comment the noted focus() line out of it, you can see the intended animation
The relevant code here is just:
Javascript:
$('#next').on({
click: function(){
//comment the following line out to see proper animation:
$('#the-input').focus();
$('.content').addClass('page2');
}
});
CSS:
.page2 {
left: -100%;
}
I have also tried (and, on my actual project, am now) using a translateX transformation for the CSS animation. Exact same issue.
I don't think I'll find a fix to make the input actually properly animate, but I can't think of any potential workarounds for focusing after the animation. I appreciate any help with this one! Thanks in advance.

Take a look here:
DEMO
You will have to use a CSS transition end event binder here, which will do the job.
$('#next').on({
click: function(){
$('.content').addClass('page2');
}
});
$(".content").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
if($(this).hasClass("page2"))
$('#the-input').focus();
});

Problem with jerky animation in jQuery

Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate()
strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.
HTML:
<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
<p>
Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
</p></div>
CSS: i read else were that margins can cause the jerkiness but this isnt helping
h2{color:#76DEFC; margin:0px;}
.yamikowebsToggler{margin:0px;}
p{margin:0px; color;#000000;}
JQUERY:
$(document).ready(function(){
$(".yamikowebsToggler").fadeOut(0);
$("h2").click(function()
{
$(this).next(".yamikowebsToggler").stop(true, true).animate(
{ height: 'toggle' },
{
duration: 1000,
});
})
});

I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of
position: absolute;
visibility: hidden;
to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding
style="height: <height in px>;"
to the elements being toggled.

I had a similar issue when animating a division from 100% down to 0% width.
What was happening was that at the start of the animation the division got wider to like 110% for some reason.
Anyway I found the solution was to add max-width: 100%; in the CSS styles on the specific division.
Just thought I'd post that here as I came here looking for a fix to this issue. :)

Have you tried increasing your {duration: ...}? Also, you could just use the built-in jQuery function .slideToggle().

I know this is marked as answer, but would like to provide an update on this issue.
The corresponding issue ticket is here:
http://bugs.jquery.com/ticket/4541
However it's been closed by core devs, and seems like it won't be fixed unless there's a patch that has no performance flaws.
In the mean time, if you still wish to use jQuery to do this, you can either set the height or the width of the element you're trying to slideUp or slideDown. It doesn't have to be in "pixel" unit, it can be in percentage as well.

How do I fade in and out a hidden element using Mootools

I am trying to fade in a hidden element, and then fade it back out again using mootools.
I can't just use $('my_div').fade('toggle'), because that assumes the element is always visible, whereas my div starts out with display:none.
Is there a simple way to combine a fade in/out with a slide in/out or some other way to achieve a nice effect?

I almost always use Fx.Reveal in Mootools.More:
http://mootools.net/docs/more/Fx/Fx.Reveal
Very nice fade-in animation, almost no effort on your part. Fx.Slide might also do the trick, although it tends to be more fiddly.
If you don't want to use Mootools.More, then rolling your own solution with Fx.Morph to change both height and opacity simultaneously could also do the trick.

I prefer using display: none as well. You can just use this code when you want to fade the element:
To fade in:
$('my_div').setStyle('display', 'block');
$('my_div').fade('in');
and to fade out:
$('my_div').fade('out');
$('my_div').setStyle('display', 'none');
Alternatively, you could just setup a class that is called .hide with display: none set in it, and put that class on your element to start with. Then it makes the code easier:
$('my_div').toggleClass('hide');
$('my_div').fade('toggle');

Start out with opacity:0 and display:block. That way you can use fade()

I do this: I don't hide the element from CSS (if you have used «display: none» or «visibility: hidden», please remove them before trying what I'm suggesting). Instead, in «domready», I use «fade('hide')» to hide the element. This way, I can later apply «fade('in')» and «fade('out')» to it.

While you could use More for highlighting an element, using delay or chain is not hard. Here's a fiddle: http://jsfiddle.net/kLn77n6t/2/
Method #1:
function inout(el){
el.fade('in').fade.delay(1000, el, 'out');
}
inout($('fader'));
(We pass the element to delay() as otherwise it doesn't know what "this" is.)
Method #2:
Same as before, but using CSS classes to set the fade properties, and adding and removing the class:
<style>
#fader{opacity:0; transition:opacity 0.5s ease;}
#fader.show{opacity:1}
</style>
<script>
function inout(el){
el.addClass('show').removeClass.delay(1000, el, 'show');
}
inout($('fader'));
</script>
Method #3:
The "correct" method should be to chain the tweens, but I haven't tried. If you need it, post a comment. "Hacky" chaining doesn't work:
$('fader').set('tween', {duration:'long', link: 'chain'});
function inout(){ $('fader').tween('opacity',1).tween('opacity',0); }