We Keep Coding

How make reusable code in jQuery?

I have code on the link below, and I need to use it several times for any places. I set different value for bars, of course it works wrong. So, the bad answer is set id to each span and copy code for them several times.
Please, give me a tip how to rewrite code that I don't need to repeat again and again.
P.S. yes, I know about progressbar.js and other libraries but in this place I need to handle bar from html elements.
$(document).ready(function() {
$(".blackbar > span").each(function() {
var percentWidth = $('.blackbar > span').data('width');
$(this).animate({
width: $(this).data("width") + "%"
}, 800);
$({
countNum: 0
}).animate({
countNum: percentWidth
}, {
duration: 800,
easing: 'linear',
step: function() {
$('.barvalue').text(Math.floor(this.countNum)).append(" %");
},
complete: function() {
$('.barvalue').text(this.countNum).append(" %");
}
});
});
});
JSFiddle example

You want to loop over each .barbox, and then find the span for the bar and the span for the value, and use them appropriately...
$(document).ready(function(){
$(".barbox").each(function() {
var $barbox = $(this);
var $barSpan = $barbox.find('.blackbar > span');
var $barValue = $barbox.find('.barvalue');
var percentWidth = $barSpan.data('width');
$barSpan.animate({
width: percentWidth + "%"
}, 800);
$({countNum: 0}).animate({countNum: percentWidth}, {
duration: 800,
easing: 'linear',
step: function() {
$barValue.text(Math.floor(this.countNum) + " %");
},
complete: function() {
$barValue.text(this.countNum + " %");
}
});
});
});
https://jsfiddle.net/vsp6vuuh/2/

https://jsfiddle.net/SeanWessell/8919job4/
Set variables for $span and the $barvalue.
$(".blackbar > span").each(function() {
var $span = $(this);
var $barvalue = $span.closest('.b-item__barbox.barbox').find('.barvalue');
var percentWidth = $span.data('width');
$span.animate({
width: percentWidth + "%"
}, 800);
$({
countNum: 0
}).animate({
countNum: percentWidth
}, {
duration: 800,
easing: 'linear',
step: function() {
$barvalue.text(Math.floor(this.countNum)).append(" %");
},
complete: function() {
$barvalue.text(this.countNum).append(" %");
}
});
});

Script is only going to last text and last color but is animating as directed, what's going on?

I am able to move the text around the div like I would like but I want it to be different colors and have different text/colors at different parts of the movement but it is only calling the final text and colors. The 'slow' part of the jQuery function seems to only be firing for the first part of the movement.
What am I doing wrong?
Fiddle here.
HTML:
<button id="button">Go!</button>
<br>
<br>
<br>
<br>
<div id="container">
<div id="demo">Hello World</div>
</div>
CSS:
#container {
width: 100%;
height: 400px;
}
JavaScript:
$(document).ready(function(){
$('#button').on('click', function(){
var divWidth = ($('#container').width());
var divHeight = ($('#container').height());
$('#demo').css('color', '#ffff00');
$('#demo').html("Going!");
$('#demo').animate({
'marginLeft' : '+=' + divWidth
}, ' slow');
$('#demo').html("Moving Down Now");
$('#demo').css('color', '#e31912');
$('#demo').animate({
'marginTop' : '+=' + divHeight
}, ' slow');
$('#demo').html("Moving Home Now");
$('#demo').css('color', '#00FFFF');
$('#demo').animate({
'marginLeft' : '-=' + divWidth,
'marginTop' : '-=' + divHeight,
}, ' slow');
$('#demo').html("I am home!");
$('#demo').css('color', '#ff0067');
});
});

.animate() is asynchronous. The animations appear in order because the animate function appends the animation to a queue. You can use the optional callback parameter of .animate() to avoid this.
(Demo)
$(document).ready(function(){
$('#button').on('click', function(){
var demo = $('#demo');
var divWidth = $('#container').width();
var divHeight = $('#container').height();
demo.css('color', '#ffff00').text("Going!").animate({
'marginLeft' : '+=' + divWidth
}, 'slow', function(){
demo.css('color','#e31912').text("Moving Down Now").animate({
'marginTop' : '+=' + divHeight
}, 'slow', function(){
demo.css('color', '#00FFFF').html("Moving Home Now").animate({
'marginLeft' : '-=' + divWidth,
'marginTop' : '-=' + divHeight,
}, 'slow', function(){
demo.css('color', '#ff0067').html("I am home!");
});
});
});
});
});

you need to wait until the animate script is finished:
`$('#demo').animate({
'marginLeft' : '+=' + divWidth
}, ' slow', function(){
....
});`
http://jsfiddle.net/xzzc4skq/1/

While animations are queued by default, changes made with the css() and html() methods do not wait for your animations to be complete. They are all executed immediately, without any delay, and all you see is the last setting.
Rather than nesting animations, I suggest that you chain them. Then use the "start" and "complete" callbacks to set HTML and CSS. The callbacks will be executed before and after each animation, respectively.
$(function() {
$('#button').on('click', function() {
var divWidth = 300,
divHeight = 100;
// stage #1
$('#demo').animate({
'marginLeft': '+=' + divWidth
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#128800').html("Going!");
}
})
// stage #2
.animate({
'marginTop': '+=' + divHeight
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#e31912').html("Moving Down Now");
}
})
// stage #3
.animate({
'marginLeft': '-=' + divWidth,
'marginTop': '-=' + divHeight,
}, {
duration: 'slow',
start: function() {
$(this).css('color', '#3cacac').html("Moving Home Now");
},
complete: function() {
$(this).css('color', '#ff0067').html("I am home!");
}
});
});
});
#container {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Go!</button>
<br>
<br>
<div id="container">
<div id="demo">Hello World</div>
</div>

slide right from left with jquery

I'm using this fiddle for a my project but I want to make targets slide from right to left. If you check the link link you can see the targets divs are sliding form left to right.
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
http://jsfiddle.net/sg3s/rs2QK/ here is a demo.
Please help I really appreciate it.

The only quick and dirty option I found was to play with zIndex and reposition non-active elements with right when animation completes.
jQuery(function($) {
$('a.panel').click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$other = $target.siblings('.panel');
if (!$target.hasClass('active')) {
$other.css({zIndex: 1});
$target.addClass('active').show().css({
right: -$target.width(),
zIndex: 2
}).animate({
right: 0
}, 500, function() {
$other.removeClass('active').css({
right: -$other.first().width()
});
});
}
});
});
Another way to filter siblings is:
var href = $(this).attr('href');
var idStr = href.replace(/[#\d]+/g, ''); // = 'target'
var $other = $target.siblings("[id^='" + idStr + "']"); // siblings with id that starts with 'target'
-Updated fiddle-

height set to "auto" not working with JS animate

I've tried to set the height to "auto" in the code below in order for the DIV to adapt its size based on the content. Unfortunately that doesn't work. (no issue if I set the height in px). Any idea why and how to fix this? Many thanks
Fiddle HERE.
JS
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
})
// clicking for the first time
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});

you need to calculate the height for the jQuery animate() to take place
demo - http://jsfiddle.net/7hcsv5dn/
var el = $("#" + page)
autoHeight = el.height(),
$("#" + page)
.addClass("active")
.animate({
height: autoHeight
}, 1000, function () {
el.height('auto');
})
.animate({
width: "200px"
}, 400, 'linear')

Toggle open by mouseover and close by moveout, not by a click

jQuery "Toggle" function question.
Can toggle open initiated by mouseover and close by mouseout, but not by a click...
How to make it open and close by mouseover and mouseout ?
js as below :
$(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 100;
$('.stack>img').toggle(function(){
var vertical = 0;
var horizontal = 0;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
vertical = vertical + 55;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingTop: '0'});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
$el.animate({paddingTop: '35px'});
});
// Stacks additional animation
$('.stack li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginRight: '10px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginRight: '0'});
});
});

Instead of .toggle, use .hover function. ex,
$('.stack>img').hover(function() {
//previos was togle