Develop Reference

Animate siblings one by one with delay

Im trying to create animation function where I click on lets say the last child in a list,
then I'll need to move all siblings one by one to the left. So it will go like a wave.
Example:
Click on child nr.4, sibling nr.1 starts to move to the left out of the screen, and with a short delay sibling nr.2 and so on follow after. So it will be like a wave effect.
I have created a JSFiddle: http://jsfiddle.net/10kjn00z/2/
$('#menu li').click(function(){
setVar(this);
$(this).siblings().animate({left: '-'+tWidth+'px'}, function() {
$(this).animate({top: '-'+onSet+'px'});
});
});
This fiddle is just a short snippet off my code, so there might be code thats isnt in use here. But I'll get the idea.
Thanks

You can use the setTimeout() function to achieve what you want.
Here's an example of how you can do it:
$('#menu li').click(function(){
var speed = 100;
setVar(this);
var siblings = $(this).siblings();
$.each( siblings, function(index,value){
setTimeout(function(){$(value).animate({left: '-'+tWidth+'px'});}, index*speed);
});
var current = this;
setTimeout(function(){$(current).animate({top: '-'+onSet+'px'})}, 400-speed+siblings.length*speed);
});
Check it out on jsFiddle

if all the elements to be shifted belong to the same parent:
$('menu li').click(function(event) {
var list = event.currentTarget.parentNode.children;
var i = list.length;
var timeout = 100
while (i--) {
setTimeout(function() {
$(list[i]).animate(/*logic here*/);
}, timeout);
timeout += 100;
}
})
This will iterate through all the children of the parent in reverse order and apply the animation. You can also tweak this to only call on certain siblings. If you want them to iterate in order, use the standard for loop instead of while. The value timeout corresponds to milliseconds of delay and you can adjust the initial and increment values to adjust the animation timing.

You can achieve that behaviour using jQuery.fn.delay, where the delay-time depends on the elements position in the siblings-list.
$('#menu li').click(function(){
setVar(this);
// call .each on siblings, because each will get a different delay
$(this).siblings().each(function(index, sibl) {
$(sibl).delay( index * 250 )
.animate({left: '-'+tWidth+'px'}, function() {
$(this).animate({top: '-'+onSet+'px'});
});
});
});

Fade a function out from another function

I have a function that is fading in and out of four boxes that are in a row and then it loops through again and again. Box 1 fades in and out, then box 2, then box 3, and finally box 4. This is done in one function.
I have another function that when a user hovers over the heading of one of these boxes that box will fade in. Then when they hover off it fades out. What I want to do in that function is when they hover on one of the headings over the box, the function controlling the looping (startSlider) will fade out, then when they hover off the heading the looping begins again.
Here is some code:
function startSlider(){
//code that is looping through each box is here
};
function hoverHere(){
$('.headings .b1').on("mouseenter", function(){
$('.box #1').fadeIn(300);
//startslider() fade out this function
})
.on("mouseleave", function(){
$('.box #1').fadeOut(300);
//startslider() begins again
});
//there is the same code here for .b2 and .box #2 and so on
}
Thanks for any help on how to stop this function from looping when hover is in effect and then to start the startSlider() function when hover is off.

I've put everything in one function so all the variables will be
in scope.. also I'm using .index() which gives you the index of the element
in regards to its parent (a simpler way of connecting between the boxes clicked and the infoboxes affected.
To make the loop start right away, I've separated the actual sliding function from the looping interval, so you can call the function separately in the beginning and then start the loop.. Notice you only need to call startSlider() function in doc ready. Let me know if you have any issues.. If you rather do it the other way and only want the loop function to start immediately than you can just separate the sliding function as in the example.
function startSlider(){
// timer
var loop = 0;
// get total boxes
var count=$('.box .info').length;
// slide index
var sliderIndex = 0;
// boxes
var boxes = $(".headings").children("div");
// info boxes
var infoboxes = $("#main_cont").find(".info");
// bind boxes hover
boxes.off().on('mouseenter', handlehover);
function resetSlider() {
window.clearInterval(loop);
loop=window.setInterval(moveSlider, 2000);
}
function moveSlider() {
if(sliderIndex+1 == count){ //will reset to first image when last image fades out
sliderIndex = 0;
}
infoboxes.fadeOut(400);
infoboxes.eq(sliderIndex).fadeIn(400); // slider image + the next image in the slider
sliderIndex++;
}
function handlehover() {
var boxnum = $(this).index();
boxes.off().on('mouseleave', resetSlider);
pauseSlider();
}
function pauseSlider() {
window.clearInterval(loop);
infoboxes.not(":eq("+boxnum+")").fadeOut(400);
infoboxes.eq(boxnum).fadeIn(400);
}
}
$(function() {
startSlider();
});

jQuery iteration though all items of a class regardless of their position in the DOM

i'm building a webpage where many span­ needs to be transitioned from one class to another to create a bg-color fadein effect. Distribution of elements of same classes is mixed through the page, but they are all grouped under common classes.
I want to create a behavior that does the following: when you click any elements of class-n, the other elements of that class transitions, with the clicked element acting as the starting point.
This is mostly figured out, thanks to some help on SO; see the jsfiddle.
$(".div").click(function () {
var itemClasses = this.classList;
var itemThread = itemClasses[1];
colorThread($(this), itemThread);
console.log(itemThread);
});
function colorThread($div, tId) {
tId = '.'+tId;
$div.toggleClass('div-clicked');
setTimeout(function () {
(function togglePrev($div) {
$div.toggleClass('div-clicked');
setTimeout(function () {
togglePrev($div.prev(tId));
}, 100);
})($div.prev(tId));
(function toggleNext($div) {
$div.toggleClass('div-clicked');
setTimeout(function () {
toggleNext($div.next(tId));
}, 100);
})($div.next(tId));
}, 100);
}
However, I am still struggling around a particular issue: I don't want the transition to stop if if encounter different class, I just want it not to toggle and keep iterating. If the jsfiddle, that would translate in all of the same color div to transition, regardless of their placement in the DOM tree.
In my togglePrev/toggleNext function, I have tried something along
if($div.hasClass(".classToTransition"))
{
$div.toggleClass(".div-clicked");
}
but couldn't get it to work properly (it doesn't ieterate to the next elements). There is something that I can't seem to grasp in the structure of that conditional. Anyone has a lead?

You really did manage to complicate something that should be pretty simple ?
$(".div").click(function () {
var coll = $('.'+this.className.replace(/(div-clicked|div)/g, '').trim()),
idx = coll.index($(this).toggleClass('div-clicked'));
$.each(coll, function(i) {
setTimeout(function() {
if (idx + i <= coll.length) coll.eq(idx + i).toggleClass('div-clicked');
if (idx - i >= 0) coll.eq(idx - i).toggleClass('div-clicked');
},i*200);
});
});
FIDDLE
It gets all the elements with the same class as the one currently clicked, and the index of the currently clicked, and then just adds and subtract 1 to the current index to get the next and previous elements. The checks are to make sure it stops when it reaches the end.

I don't want the transition to stop if if encounter different class, I just want it not to toggle and keep iterating
You might want to use nextAll(tId).first()/prevAll(tId).first() to select the next to-be-toggled element: http://jsfiddle.net/35uNW/4/. .next() does only look at the next sibling, and if that doesn't match your tId selector, no element will be selected.
If you want to iterate the different-classed elements so that you wait for each one, but don't want to toggle it, you can use your if-condition but you must remove the tId selector from the next()/prev() calls: http://jsfiddle.net/35uNW/3/.

This was a fun one. I did it a slightly different way, getting all of the matched elements and splitting them into before and after arrays.
var $allItems = $(".div");
$(".div").click(function () {
var itemClasses = this.classList;
var itemThread = itemClasses[1];
colorThread($(this), itemThread);
});
function colorThread($div, classname) {
var tId = '.'+classname,
$divs = $allItems.filter(tId),
index = $divs.index($div),
$before = $divs.slice(0, index),
before = $before.get().reverse(),
$after = $divs.slice(index+1);
$div.toggleClass('div-clicked');
$(before).each(function(i, item){
setTimeout(function () {
$(item).toggleClass('div-clicked');
}, i*100);
});
$($after).each(function(i, item){
setTimeout(function () {
$(item).toggleClass('div-clicked');
}, i*100);
});
}
Here's a working fiddle: http://jsfiddle.net/5sUr4/

How do I show an element using the below JQuery code?

CODE:
$(document).ready(function() {
$('.clicker').on('click', function(e){
e.preventDefault();
var $btn = $(this);
$btn.toggleClass('opened');
var heights = $btn.hasClass('opened') ? 300 : 100 ;
$('#thiswillexpand').stop().animate({height: heights });
});
});
By default I want #thiswillexpand to be hidden so I am going to use display:none; But when .clicker is clicked I want it to show and then expand as the script is supposed to.
Question:
How do I show #thiswillexpand when .clicker is clicked while still retaining whatever the script is doing?

I think what you are looking for is to simply add a call to the show() function -
$('#thiswillexpand').show().stop().animate({height: heights });
The show() function is chainable, so you can just insert it before the calls to the other stop and animate functions.

Add new item to bottom of scrollabe div

I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.

I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});​
Demo: http://jsfiddle.net/MrvcB/19/

Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);

Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/