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

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); }

Related

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.

Animate Toggle of Links for Stairstepped Effect

I'm attempting to use .each() and .toggle() or .fadeToggle() or an equivalent to create a 'stairstepped' animation using JS and jQuery on a website using Bootstrap 3.
I've a jsfiddle: http://jsfiddle.net/JeffroDH/2xcv7cb1/
Essentially, when I click the 'Categories' link, I'd like the subcategories to unhide in rapid succession, but not all at the same time, so they appear to flow out, rather than just fading in as a block. The animation could be a slide from the left, or simply a fadeToggle, but I can't seem to get .each(), .delay(), and .fadeToggle() to do what I want.
You aren't showing your CSS here, but I would accomplish this with a class. For example, in your category-dropin-item class, add:
max-height:0;
transition: max-height .2s;
Then, in another class, maybe called show, add:
max-height:2em;
(you'll need to play with the value to get it to work right.) Then, in your JQuery, when a user clicks the Categories link, delay the addition of the show class. You should get a nice little falling transition.

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();
});

Toggle CSS transitions on and off with JavaScript

All,
I've got a situation in which I'm using CSS transforms/transitions to animate the horizontal position of a div element. Specifically, I'm using...
// in CSS
myDiv {
transition: transform 0.4s ease-in;
}
// in JavaScript, where "div" contains a reference to the div element
div.style.transform = translate3d(Npx, 0px, 0px);
...and it works well. That is, every time I call that line of JavaScript with a new value for N, the div smoothly animates from its current position to its new position.
However, there are times when I need position the div first WITHOUT a transition, then MOVE it WITH a transition. E.g.,
Have the div JUMP (instantly) to 100px, then transition (over 400ms) to 200px
Later, JUMP the div to 500px (without a transition), then transition it to 600px
In other words, I'd like to be able to move a div, and be able to control whether the new position is applied instantaneously, or with a transition.
Complicating matters, I have event listeners that fire when the transition is complete; these listeners should NOT fire if/when I move the div without a transition. I'm also supporting multiple browsers, so I have to deal with all the vendor prefixes.
In pseudo-code, I guess it would look something like this:
Remove the event listeners for the transitionEnd event
Set the transition property to none
Change the position of the div (e.g., [div].style.transform = translate3d([starting position]px, 0px, 0px))
Add the event listeners for the transitionEnd event
Set the transition property to have a transition (e.g., [div].style.transition:all 0.4s ease-in)
Change the position of the div (e.g., [div].style.transform = translate3d([ending position]px, 0px, 0px))
With all the vendor prefixes, that's too messy and complicated to be the best way to accomplish this. (I'm not even sure if it works...)
So, what's the best way to toggle transitions/transformations on and off?
[UPDATE]
Thanks to a suggestion from Chandranshu, I've tried toggling a class that includes the transitions.
So, my pseudocode looks like this:
Remove the transitions class
Apply the starting position
Restore the transitions class
Apply the ending position
However, it looks like, if I execute all four steps in a single JavaScript function - it seems to ignore steps 1-2, as though it's "netting" the results of all four steps.
Here's a jsfiddle that demonstrates this: http://jsfiddle.net/bUvX3/
Instead - if I execute steps 1 and 2, then execute steps 3 and 4 after a short delay (e.g., by using a setTimeout), it works: http://jsfiddle.net/2mhcv/
So, I guess that's a solution, except that I really don't like having to add an arbitrary delay, especially when so much emphasis is placed on fast, responsive UIs.
Thanks in advance!
I think you have over-complicated this :). Here's how I'd approach this problem:
Add a class to your divs, say movable.
Declare all your transition rules and transitionEnd callbacks for .movable.
Nothing to do if you want to move your div smoothly.
When you need to move your div w/o a transition, remove this class, move your div and add this class back: $('div').removeClass('movable').animate({transform: 'translate3d(...)' }).addClass('movable')
UPDATE:
Finally, I've got what you wanted: http://jsfiddle.net/2mhcv/1/. The only change here is that instead of a delay of 20ms, I'm using a delay of 0! setTimeout() causes a repaint to be triggered and that ensures that the first animation is executed before the next one begins.
UPDATE 2:
This version works without a setTimeout() call: http://jsfiddle.net/2mhcv/2/. Realizing that a repaint is all that is needed, I just added a line there to read a compute CSS property such as display. You could have read any other computed property to get the same effect.

Applying new css to elements with jQuery, how to add transition?

I've got this jQuery rule to set .preloader to display none
$(".preloader").css("display", "none");
I How ever I want it to disappear with fade out effect and also while it's fading zoom out, I don't know how to do zoom out effect, but I tried applying this to make it fade out
$(".preloader").css("display", "none").fadeOut("200");
How ever that didn't work. Can you please suggest how to achieve those two effects? Also, will solution work vice versa? (fade it in, and zoom it in until it's original sizes)
In order to fade it out, just use fadeOut(). The end of the animation is actually setting a display: none to the element:
$(".preloader").fadeOut("200");
$(".preloader").toggle('hide'); and $(".preloader").toggle('show'); should do it, but $.toggle() by itself works if you don't care what the display state is.
However,
$(".preloader").stop(true,false).animate({
width: 'toggle',
height: 'toggle',
opacity: 'toggle'
});
is way cooler, and you only need one statement. You could use a boolean with $.toggle(yourShowStateBooleanVariableGoesHere), too.
Also, I recommend you use id rather than class selectors unless it absolutely has to be applied to all classes (which I find rare).
$(".preloader").css("display", "none").fadeOut("200");
this code first hides the .preloader and than tries to fadeOut wich is impossable because its already hidden.
try this:
$(".preloader").fadeOut(200);
or
$(".preloader").fadeOut("fast");
$(".preloader").hide().fadeIn("200");
$(".preloader").fadeOut("200");
When the fadeOut effect completes it sets the display to none for you, so you dont need the css method.
$(document).ready(function(){
$(".preloader").hover(function(){
$(".preloader").fadeOut();
}, function(){
$(".preloader").fadeIn();
});
});
http://jsfiddle.net/BY3tz/8/
This should give you some hints.
If you also want a zoom out, this could be a possible sollution:
$('.preloader').animate({width: 'toggle', height: 'toggle', opacity: 'toggle'}, 1000);
Use the same to get it back.
Have a look at the fiddle.

Categories