Develop Reference

How to animate nested content when animated parent slide moves into viewport, not using scroll

I'm looking to use javascript to animate the content of a nested DIV within an parent slide when the parent slide moves into the viewport.
At the moment, the content in the nested DIV only animates once a scroll command is also triggered after the parent slide moves onto the screen. I believe this is because the slide motion is animated and not scroll controlled.
The same issue is at play in this JSFiddle demo I created to explore the issue:
http://jsfiddle.net/9dz3ubL1/
(The animated movement of the slide from right to left in this demo has been created to test for this problem, to replicate the motion of the slide without scrolling; it is not actually a feature of the development proper).
My question is, how can I script for the animations to be triggered for each nested DIV, when each slide element moves into the viewport, without requiring a scroll function?
Thanks for any help. Here's the script I'm using to control opacity and other CSS stylings.
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll(function() {
/* Reveal hidden_header delayed */
$('.hidden_header').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is completely visible in the window, fade it it */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 500);
$(this).animate({
'right': '0'
}, 1500);
}
});
/* Reveal hidden_content delayed */
$('.hidden_content').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is completely visible in the window, fade it it */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 3000);
$(this).animate({
'bottom': '0'
}, 3500);
}
});
/* Reveal button delayed */
$('.button').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is completely visible in the window, fade it it */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 5000);
}
});
});
});

If your slide motion is animated fully (not incremental as it is in the jsfiddle you linked) then jQuery provides you with the ability to perform an action after your animation is complete.
http://api.jquery.com/animate/
Look at the options you can use for the animation function. One of them is called done. You can assign a function to the done option and that function will be called when your animation is complete.
Using one of your animates as an example, the syntax may look like this:
$(this).animate({
'opacity': '1'
}, {duration: 3000, done: function () {
//animate some stuff here
}};
Note that I just picked a random animation from your code. I'm not sure exactly when you want to perform the animation of the content, but you can use this technique anywhere you use a jQuery animate.
I've used this before to control nested animations in a slideshow format and it has worked very well! I hope this what you wanted.

Click through div and fade out on mouse over

I have a navbar on the top of the page, and when certain events run, I have a header that pops up for about 3 seconds. During this time you cannot click on the underlying nav links.
.alert-header{
pointer-events: none;
}
I tried doing a css transition, but pointer events are set to none. So I tried with jquery (assuming pointer events only affect css):
$(document).on('mouseenter', '.alert-header', function(){
$(this).animate({opacity: 0.2}, 'fast');
}).on('mouseleave', '.alert-header', function(){
$(this).animate({opacity: 1}, 'fast');
});
So, after doing that and testing it, I get the same result as with doing a css transition.
Is there a way where I can fade out the header to 0.2 opacity when the mouse moves over it, and be able to click on the underlying links?

Okay, I have figured out a way. First in the css I turn off pointer events for the div I want to click through:
.alert-header{
pointer-events: none;
}
Next I test the Y position of the mouse when it moves cursor and when the header is visible, if the Y position is less than the height of the header I make it fade, otherwise I fade it back to opaque.
var fadeRunning = false;
$(document).on('mousemove', function(e){
var header = $('.alert-header');
if(header.is(':visible')){
var mouseY = e.pageY;
var height = header.outerHeight();
if(mouseY <= height && !fadeRunning){
fadeRunning = true;
header.animate({opacity: 0.2}, 'fast', function(){fadeRunning=false});
}else{
if(!fadeRunning){
fadeRunning = true;
header.animate({opacity: 1}, 'fast', function(){fadeRunning=false});
}
}
}else{
header.css({opacity: 1});
}
});

Bootstrap Modal zoom out animation

I'm trying to implement a zoom out animation on hide(), based on the answer on the github repo of bootstrap-modal (using Bootstrap 2.3.2).
The idea is to add a CSS transition, and intercept the hide event, something like:
$modal.on('hide', function () {
$modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)'});
// return false; // uncomment this line to see zoom out
});
The problem is that the modal is hidden before there's a chance to see the animation. Returning false shows the animation, but keeps the modal box from completing the hiding.
How can I complete the hide process but still see the animation?
See fiddle at http://jsfiddle.net/dtyohc28/5/
TIA

A little hacky but works. http://jsfiddle.net/dtyohc28/7/
$modal.on('hide', function () {
$modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)'});
if($modal.css('top')!="0px"){
setTimeout(function(){
$modal.modal('hide');
}, 750);
return false;
}
});

http://jsfiddle.net/dtyohc28/6/ Try this, instead of using on('hide'), make your own function to control it.
$('#dismissModal').click(function(){
$modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)', opacity:'0'});
setTimeout(function(){
$('.modal').modal('hide')
},750);
});

Menu animation slide from top function

I would like to add a menu like the one in this demo site Here
it drops down from the top of the page as you can see and i would like to know if this was done with only CSS3 or .
If someone can show me a simple function so i can go off it that would be nice!
EDIT: ok i found the code snippet for it I think , i still want to know if this is a good way to do it , and if someone can make this more simple, seems like a lot of code just for that
var isUp = false;
var navHeight = $('#navContainer').height();
var hideHeight = navHeight - 50;
$('#arrowLink a').click(function(e){
e.preventDefault();
navHeight = $('#navContainer').height();
hideHeight = navHeight - 50;
$('.tooltip').remove();
if(!isUp){
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_bottom.png');
$(this).find('img').attr('title',showNav);
$( "#navContainer" ).animate({
top: '-='+ hideHeight + 'px'
}, 500, "swing", function() {
isUp = true;
});
}else{
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_top.png');
$(this).find('img').attr('title',hideNav);
$( "#navContainer" ).animate({
top: "0"
}, 500, "swing", function() {
isUp = false;
});
if($('body').hasClass('body_show_content'))
{
$('#mainContainer').fadeIn();
}
}
});`

Yes, it can be done. You can use css transition/keyframes and a click event.
Code
html
<div id="container hidden">Something</div>
css
#container {
postion:fixed;
-webkit-transition: all 2s;
transition: all 2s;
}
.hidden {
top: -25px;
}
js
$('#container').click(function(){
$(this).toggleClass('hidden');
});
Explanation
Your menu is fixed at the top of the page. Whenever you toggle the button that displays/hides it, you can add a css class that changes the position of the element. Because you have transition on the element, it will animate to that new location. This can also be done using keyframes instead of transition to have more control.
css transition
css keyframes

If you want to achieve this using pure css, you need to make use of transition effect. Check out the fiddle which gives a fair idea of something similar.
FIDDLE

How to stop jquery animate at onclick?

I'm new in jquery, I don't know much about it, but I need it because I'm building a template...Here is situation, I have a div which I want to slide in to page ( from outside, top) when I click on link, and when I click anywhere else on the page to slide out... This is what I have:
var tmpl_name = '<?php echo $this->template ?>';
jQuery(document).ready(function() {
jQuery('#link').click(function() {
var topy = jQuery('#div');
topy.delay(0).animate({
top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : 10
},500, 'easeInOutCirc', function() {jQuery(this);});
});
});
...and it works well,when I click on link div slide in to page, but I don't know how to achieve when I click anywhere else on page to slide out the div, I have tried to add:
jQuery('body').click(function() {
var topy = jQuery('#div');
topy.delay(0).animate({
top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : -500
},1000, 'easeInOutCirc', function() {jQuery(this);});
});
...but problem is when I click on link to slide in div, div goes in and out of page ( probably because link is also in body and this second part of code affects it too.
Thanks for your time...Best regards

try:
jQuery(document).ready(function() {
jQuery('#link').click(function(e) {
e.preventDefault();
var topy = jQuery('#div');
topy.delay(0).animate({
top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : 10
},500, 'easeInOutCirc', function() {jQuery(this);});
});
});
To kill the event propagation to the document object

The .stop() function can be chained at the beginning of your call as well at the end to stop any animations.
i.e. $("#element").stop().bounce().stop();