Develop Reference

How to queue CSS3 animations when shown after page scroll (JSFiddle provided)

JSFIDDLE: http://jsfiddle.net/mh7e8/1/
I have 3 images I want to add a .animation class to so that they reveal with a bounce:
<div class="row">
<div class="col-sm-4 steps">
<img src="./s3/img/sprite-circle-1.png" class="step-1 bounceIn">
</div>
<div class="col-sm-4 steps">
<img src="./s3/img/sprite-circle-2.png" class="step-2 bounceIn">
</div>
<div class="col-sm-4 steps">
<img src="./s3/img/sprite-circle-3.png" class="step-3 bounceIn">
</div>
</div>
I already have a very nice (working) CSS3 animation:
.animated.bounceIn{
// code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
}
I want the class to apply to each image, with a 1 second delay between them, when the first image loads on the screen.
I have the code to determine when the element is visible (working):
(function ($) {
$.fn.isVisible = function (partial, hidden, direction) {
// working code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
})(jQuery);
$(function () {
var $bounceIn = $('.step-1');
var testVis = function () {
$bounceIn.each(function () {
if ($(this).isVisible()) {
console.log("step-1 visible");
}
});
};
$(window).on('scroll resize', testVis);
testVis();
});
Where I am struggling is to find how to delay each animation sequentially. Applying a delay to the CSS transition doesn't seem to invoke consistent behaviour accross browsers (e.g. step-2 can load before step 1). How can I queue this in jQuery?

You can define the CSS animations and attach them to specific classes.
CSS
.slideUp {
animation: slide-up 1500ms ease;
}
JQUERY
/* these are the classes you want to animate */
toAnimate = ['step1', 'step2', 'step3']
/* iterate over this array and apply the *slideup* class */
$.each(toAnimate, function(i, class) {
window.timeout(function {
$('.parent').find(class).addClass('slideUp')
}, i*1000);
}
Now, just use jQuery to add those classes to the elements at the appropriate times (for example, with a delay of 1 second, add the .slideUp class to the four images, etc)

jquery fadeout/fadein flicker issue

i have read several posts on this but none seems to solve my issue,
when I fadeout a gallery, the other fades in, that works fine...but the item that fades in seems to 'refresh' or fade in again (real quick) after the fadein animation completed, here's my code:
what I have is basically a photo gallery (photographySection) contained inside a 'mediaContainer', this is the css:
.mediaContainer {
position: relative;
}
.photographySection {
top: 10px;
left:0;
position: absolute;
}
html:
<div class='mediaContainer'>
<div class='photographySection hidden' id='photographyExperimental'>
<ul><li><img src...></li></ul>
</div>
<div class='photographySection hidden' id='photographyFaces'>
<ul><li><img src...></li></ul>
</div>
</div>
js:
$(".photographyMenu").click(function(event){
$(".photographySection").hide(1,function() { // hide all sections
var section = $(event.target).attr("section"); // read new section to show
$("#"+section).fadeIn(500); // for example $("#photographyFaces")
});
});
everything works smoothly, but sometimes after the chosen div fades in, it flickers/blinks once for some reason
thanks!

Do you really need all that markup for such a simple task? If all you want is just fade a bunch of images in and out, you could do something like this:
html markup:
<div class="mediaContainer">
<img src="" />
<img src="" />
<img src="" />
</div>
jQuery:
function fadeInOut(){
var imgs = $('.mediaContainer > img');
imgs.wrapAll('<div class="slideshow" />');
$('.slideshow > img:gt(0)').hide();
setInterval(function(){
$('.slideshow > img:first')
.fadeOut(500)
.next('img')
.fadeIn(500)
.end()
.appendTo('.slideshow');
}, 5000);
}
Maybe someone more experienced can improve upon this code. You can also set vars to those "magic numbers" (500/5000) and some other things, but that should solve the problem with much less code (just an option).

Just don't use the 500, and it will work smoother, slow is 600miliseconds and normal is 400miliseconds

You can try this one: http://jsfiddle.net/S4sbm/
$(".photographySection:gt(0)").hide();
$(".photographyMenu").click(function(event){
$(".photographySection").fadeOut(500);
var section = $(event.target).attr("section"); // read new section to show
$("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")
});
checkout the fiddle and see if this helps.

before using jquery to fadein in on mouseover.how to let hidden element take up space?

how to let element take up space when hidden, before using jquery mouseover to make it appear.
here is an example.
http://jsfiddle.net/Nj97k/
when i do visiliblity hidden, the icon no longer fades in on mouseover.

Initially make opacity 0
<a id='posttext'class='flagpost' style='color:grey;' href='javascript:void(0)'>
<i style="opacity: 0 " class='icon-flag'>This is an icon</i>Flag
</a>​
then do fades normally:
$('.flagpost').mouseover(function() {
$('.icon-flag').fadeTo(500, 1);
});
$('.flagpost').mouseleave(function() {
$('.icon-flag').fadeTo(300, 0);
});​
Demo here

You can either replace display:none with opacity:0 on your element, or you could trigger the mouseleave event of your jQuery immediately to do this for you:
.icon-flag {
opacity: 0;
}
Or
$('.flagpost')
.mouseover(function(){
$('.icon-flag').fadeTo(500,1);
}).mouseleave(function(){
$('.icon-flag').fadeTo(300,0);
}).trigger("mouseleave");​​​​​

css3/Jquery animation/transition/: How to make image move vertically and back?

I want to do this effect in my image (button)
http://osc4.template-help.com/wt_32608/index.html#
I want to make this animation whatever the method CSS3, HTML5 canvas , JS
If I will use Hover property , how can I make the image slide and back when roolout

First, make a < div > that will contain the animation.
<div id="image_holder"></div>
Then, place the < img > inside.
<div id="image_holder_1" class="image_holder">
<img id="image_1" class="image" ..... />
</div>
Next, add some CSS styling to the < div > like so:
.image_holder {
overflow: hidden;
}
And also some CSS to the < img >:
.image {
position: relative;
}
Now, animate the image with jQuery. Specifically, you will be animating the "top" CSS attribute for the image:
$('#image_holder_1').hover( function() {
$('#image_1').animate({
top: '-' + $(this).height() + 'px'
});
}, function() {
$('#image_1').animate({
top: '0px'
});
});
See it in action here: http://jsfiddle.net/trusktr/7hTDu/
Alternatively, you can do it with CSS3 animations. Do a search for "CSS3 transitions" on google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions

something like this.
$(".items").each(function() {
$(this).mouseover(function(){
$(this).find(".inner").slideDown();
});
$(this).mouseout(function(){
$(this).find("inner").slideUp();
});
});
but it would be better if you give us some code of your html struct, and something aboute your idea.

The easiest way is probably to position the images absolutely and then manipulate the top, something like this:
<img id="myimage" style="position: absolute" src="whatever"/>
<script>
$('#myimage').animate({top: '<whatever>px' },someDuration);
</script>
Read the jQuery animate docs here: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate
It should not be that hard to figure out :)

If just an animated background to a button you want, why not use background-image and animate the background-position with jQuery?

How to scroll to specific item using jQuery?

I have a big table with vertical scroll bar.
I would like to scroll to a specific line in this table using jQuery/JavaScript.
Are there built-in methods to do this?
Here is a little example to play with.
div {
width: 100px;
height: 70px;
border: 1px solid blue;
overflow: auto;
}
<div>
<table id="my_table">
<tr id='row_1'><td>1</td></tr>
<tr id='row_2'><td>2</td></tr>
<tr id='row_3'><td>3</td></tr>
<tr id='row_4'><td>4</td></tr>
<tr id='row_5'><td>5</td></tr>
<tr id='row_6'><td>6</td></tr>
<tr id='row_7'><td>7</td></tr>
<tr id='row_8'><td>8</td></tr>
<tr id='row_9'><td>9</td></tr>
</table>
</div>

Dead simple. No plugins needed.
var $container = $('div'),
$scrollTo = $('#row_8');
$container.scrollTop(
$scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);
// Or you can animate the scrolling:
$container.animate({
scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​
Here is a working example.
Documentation for scrollTop.

I realise this doesn't answer scrolling in a container but people are finding it useful so:
$('html,body').animate({scrollTop: some_element.offset().top});
We select both html and body because the document scroller could be on either and it is hard to determine which. For modern browsers you can get away with $(document.body).
Or, to go to the top of the page:
$('html,body').animate({scrollTop: 0});
Or without animation:
$(window).scrollTop(some_element.offset().top);
OR...
window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

I agree with Kevin and others, using a plugin for this is pointless.
window.scrollTo(0, $("#element").offset().top);

I managed to do it myself. No need for any plugins. Check out my gist:
// Replace #fromA with your button/control and #toB with the target to which
// You wanna scroll to.
//
$("#fromA").click(function() {
$("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

You can use scrollIntoView() method in javascript.
just give id.scrollIntoView();
For example
row_5.scrollIntoView();

You can use the the jQuery scrollTo plugin plugin:
$('div').scrollTo('#row_8');

Scroll element to center of container
To bring the element to the center of the container.
DEMO on CODEPEN
JS
function scrollToCenter() {
var container = $('.container'),
scrollTo = $('.5');
container.animate({
//scrolls to center
scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
});
}
HTML
<div class="container">
<div class="1">
1
</div>
<div class="2">
2
</div>
<div class="3">
3
</div>
<div class="4">
4
</div>
<div class="5">
5
</div>
<div class="6">
6
</div>
<div class="7">
7
</div>
<div class="8">
8
</div>
<div class="9">
9
</div>
<div class="10">
10
</div>
</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
Scroll
</button>
css
.container {
height: 60px;
overflow-y: scroll;
width 60px;
background-color: white;
}
It is not exact to the center but you will not recognice it on larger bigger elements.

You can scroll by jQuery and JavaScript
Just need two element jQuery and this JavaScript code :
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
#pane1 {
background: #000;
width: 400px;
height: 400px;
}
#pane2 {
background: #ff0000;
width: 400px;
height: 400px;
}
#pane3 {
background: #ccc;
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>

Not sure why no one says the obvious, as there's a built in javascript scrollTo function:
scrollTo( $('#element').position().top );
Reference.

I did a combination of what others have posted. Its simple and smooth
$('#myButton').click(function(){
$('html, body').animate({
scrollTop: $('#scroll-to-this-element').position().top },
1000
);
});

Contrary to what most people here are suggesting, I'd recommend you do use a plugin if you want to animate the move. Just animating scrollTop is not enough for a smooth user experience. See my answer here for the reasoning.
I have tried a number of plugins over the years, but eventually written one myself. You might want to give it a spin: jQuery.scrollable. Using that, the scroll action becomes
$container.scrollTo( targetPosition );
But that's not all. We need to fix the target position, too. The calculation you see in other answers,
$target.offset().top - $container.offset().top + $container.scrollTop()
mostly works but is not entirely correct. It doesn't handle the border of the scroll container properly. The target element is scrolled upwards too far, by the size of the border. Here is a demo.
Hence, a better way to calculate the target position is
var target = $target[0],
container = $container[0];
targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;
Again, have a look at the demo to see it in action.
For a function which returns the target position and works for both window and non-window scroll containers, feel free to use this gist. The comments in there explain how the position is calculated.
In the beginning, I have said it would be best to use a plugin for animated scrolling. You don't need a plugin, however, if you want to jump to the target without a transition. See the answer by #James for that, but make sure you calculate the target position correctly if there is a border around the container.

For what it's worth, this is how I managed to achieve such behavior for a general element which can be inside a DIV with scrolling (without knowing the container)
It creates a fake input of the height of the target element, and then puts a focus to it, and the browser will take care about the rest no matter how deep within the scrollable hierarchy you are. Works like a charm.
var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');
$scrollTo.prepend(inputElem);
inputElem.css({
position: 'absolute',
width: '1px',
height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

I did this combination. its work for me. but facing one issue if click
move that div size is too large that scenerio scroll not down to this
particular div.
var scrollDownTo =$("#show_question_" + nQueId).position().top;
console.log(scrollDownTo);
$('#slider_light_box_container').animate({
scrollTop: scrollDownTo
}, 1000, function(){
});
}