Animate Toggle of Links for Stairstepped Effect - javascript

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.

Related

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

Making flip effect on hover, on blur go fade with CSS + jQuery

I have to do something like pexeso. When you hover element, it will flip front to back side (they have different texts) and when your mouse is out, it will fade from back to front side. This is example HTML, how it looks like:
<div class="pexeso">
<div class="pad">
<div class="front">1</div>
<div class="back">ONE</div>
</div>
etc...
There is some CSS, to look it well (it is in the jsFiddle source, attached bellow). Then Handling mouse enter and leave with jQuery:
$('.pexeso .pad').each(function() {
var el = $(this);
var back = el.find('.back');
el.on('mouseenter', function() {
back.removeAttr('style');
el.removeClass('before-fade').addClass('do-flip');
});
el.on('mouseleave', function() {
el.removeClass('do-flip').addClass('before-fade');
back.stop(true, true).fadeOut(250, function() {
el.removeClass('before-fade');
});
});
});
Here is full example in jsFiddle: DEMO
Try to hover any element from left or right side of your screen, it will works great. But now try to hover from top or bottom, it will do weird things to graphic and also, sometimes it stucks and remains invisible.
Probably know the problem: When you hover from top or bottom, it will start flipping, and when you are too slow, it also fires event mouseleave, because flipping is in progress and you are actually at empty space. Then it calls 1st function, then second, a lot of time and it got stuck. But I don't know how to fix it, can you help me?
Ok guys, don't try anymore, I already found a solution. Whoever is interested, how I fixed it, here is solution:
In CSS, make .back element always visible, so find this line &.do-flip { and add this style .back { display: block !important; }
In jQuery, there is no need to have back.removeAttr('style');, also this did mess with opacity style (fading effect)
Now wrap every "pad" with parent, for example .pad-container and give him exact sizes as .pads, now we will manipulate with him
Each function will take these wrappers, not "pads", so in jQuery $('.pexeso .pad-container').each(function() {...
Bind events mouseenter and mouseleave on this wrapper, but changing classes remain on "pads" and fadeOut effect on back element. Also, add function .show() to this back element before fadeOut.
That's all. Here is updated version: UPDATED DEMO

Vertical expanding pop up window with javascript or jquery

I am trying to find a way to enable my pop up window expand in a similar fashion as the Facebook Birthday popup expands. If you login to your Facebook page and click the "others" link next to where it shows how many of your friends have birthdays today, you will notice the pop up window shows up very small and then grows in a vertical fashion.
How am I able to do this?
I created a fiddle to show what I have so far.
https://jsfiddle.net/05w8fpL5/
I have added..
.fadeIn("slow");
and
.fadeOut("slow");
So far which I like, but I wish I had some say so on how long it took to fadeIn and Out.
Does anyone know how I could accomplish this?
You can achieve this using the .slideUp() and .slideDown events in Jquery. This will provide the vertical expanding animation that you are looking for. So change your .fadeIn and fadeOut functions, an important note that the slide functions do not work with min-height, you will need to remove that CSS from .admin_help_popup for this to work:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow");
});
$('.close_admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideUp("slow");
});
If it's completely necessary you have that min-height property, you can set min-height back to it's default value after .slideDown. You can try and make it smoother by using .animate(). Make sure to set mine-height to 0px on the slide up:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow", function(){
$(".admin_help_popup").animate({"min-height": "380px"}, "fast");
});
});
$('.close_admin_popup').on('click',function(){
$(".admin_help_popup").css("min-height", "0px");
$(".light_admin,.white_overlay").slideUp("slow");
});
Basic SlideUp/Down Fiddle Example without min-height
Fiddle example with min-height

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.

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

Categories