Develop Reference

Jquery animate, execute opposite action if condition

I am trying to animate divs. The idea is that when the customer has scrolled until the div it become animated... and if the customer scroll back to the top of the page this the div run the action opposite to the first animation (like a fadein/out)
Well the point is that after the first animation, the second one never run.
This is my code:
<div class="wrapper">
<div class="face_content">
<img src="img/face.jpg">
</div>
<div class="face_text">
<p>some text here</p>
</div>
</div>
And then I am trying this javascript with jquery
var face_dist = $('.wrapper').offset().top;
$(window).scroll(function () {
//show the face
var face_diff = face_dist - $(window).scrollTop();
if(face_diff < 200) {
show_sch();
}
if($('.face_content').hasClass('showing')) {
if(face_diff > 200) {
hide_sch();
}
}
});
function show_sch() {
$('.face_content img').animate({
'opacity': 1,
'right': 0
},1000, function() {
$('.face_content').addClass('showing');
});
$('.face_text ul').animate({
'opacity': 1,
'left': 0
},1000);
}
function hide_sch() {
$('.face_content img').animate({
'opacity': 0,
'right': 80
},1000);
$('.face_text ul').animate({
'opacity': 0,
'left': 80
},1000);
}
Any idea? (the first animation run properly but the second one no at all.

The issue is because your face_diff value is never more than 200, but smaller than -200. And you animate is played a lot of time. You can control this with a check if active.
Please try below
var face_dist = $('.wrapper').offset().top;
var active = 0;
$(window).scroll(function () {
//show the face
var face_diff = face_dist - $(window).scrollTop();
if(face_diff < 200 && face_diff >= 0) {
if(active==0){
active=1;
show_sch();
}
}
if($('.face_content').hasClass('showing')) {
if(face_diff < -200) {
if(active==0){
active=1;
hide_sch();
}
}
}
});
function show_sch() {
$('.face_content img').animate({
'opacity': 1,
'right': 0
},1000, function() {
$('.face_content').addClass('showing');
active=0;
});
$('.face_text ul').animate({
'opacity': 1,
'left': 0
},1000,function(){
active=0;
});
}
function hide_sch() {
$('.face_content img').animate({
'opacity': 0,
'right': 80
},1000,function(){
active=0;
});
$('.face_text ul').animate({
'opacity': 0,
'left': 80
},1000,function(){
active=0;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="face_content">
<img style="opacity:0" src="https://www.dpreview.com/files/p/articles/7192167506/images/intro.jpeg">
</div>
<div class="face_text">
<p>some text here</p>
</div>
</div>

Scheduling individual setTimeout events using JQuery to occur in serial

I hope to create a text transition animation using JQuery and have run into an issue of timing. I've looked around some other threads and have not been able to figure out the proper solution to what I am trying to accomplish. Here is the HTML I have:
<div id="t1">
<span>T</span>
<span>H</span>
<span>I</span>
<span>S</span>
</div>
<div id="t2">
<span>T</span>
<span>H</span>
<span>A</span>
<span>T</span>
</div>
JS:
function showMessage(obj, up){
if(dir){
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 1.0,
'top': '0px'
}, 450);
}, 500 + (i * 150));
});
} else {
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 0,
'top': '-30px'
}, 450);
}, 3000 + (i * 150));
});
}
}
showMessage("#t1", true);
showMessage("#t1", false);
showMessage("#t2", true);
showMessage("#t2", false);
Both THIS and THAT are being displayed at the same time. How can I make it so the second isn't displayed until the first has completely disappeared?
demo: jsfiddle

can you chain them?
showMessage("#t1", true, function(){
showMessage("#t1", false, function(){
showMessage("#t2", true, function(){
showMessage("#t2", false, function(){});
});
});
});
and then include counters in your showMessage to check if all the spans have been displayed
function showMessage(obj, up, callback){
var counter = 1;
var numberOfChildren = $(obj).children().size();
if(up){
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 1.0,
'top': '0px'
}, 450, function(){
counter++;
console.log(counter);
if ( counter == numberOfChildren )
{
callback();
}
});
}, 500 + (i * 150));
});
}
else {
$(obj).children().each(function(i, el) {
setTimeout(function() {
$(el).animate({
'opacity': 0,
'top': '-30px'
}, 450, function(){
counter++;
console.log(counter);
if ( counter == numberOfChildren )
{
callback();
}
});
}, 3000 + (i * 150));
});
}
}
$(function() {
showMessage(".dev", true, function(){
showMessage(".dev", false, function(){
showMessage(".dev2", true, function(){
showMessage(".dev2", false, function(){});
});
});
});
});
updated dir to up.

setTimeout is performed under vacuum. Anonymous function does not know about your external variables i and el

Try substituting .delay() for setTimeout , calling second set of animations when i is equal to total .length of first set of animations within .each() called on #t1 .children() : span elements
function showMessage(obj, dir) {
var first = obj[0], second = obj[1];
$(first).children().each(function(i, el) {
$(el).delay(500 + (i * 150)).animate({
"opacity": 1.0,
"top": "0px"
}, 450, function() {
// when all `first` : `#t1` `span` animations complete,
// call `next` with `second`:`#t2` as parameter
if (i === first.length) next(second)
});
});
var next = function(elems) {
$(elems).children().each(function(i, el) {
$(el).delay(3000 + (i * 150)).animate({
"opacity": 0,
"top": "-30px"
}, 450);
});
}
}
showMessage(["#t1", "#t2"]);
#t1 span {
opacity: 0;
top: 30px;
}
#t2 span {
opacity: 1;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="t1">
<span>T</span>
<span>H</span>
<span>I</span>
<span>S</span>
</div>
<div id="t2">
<span>T</span>
<span>H</span>
<span>A</span>
<span>T</span>
</div>

Box auto silding fromleft to right

I have three boxes and now, there are working as i expected. But, I need this work automatically every 30 secs without 'click' event. Please see this fiddle http://jsfiddle.net/ykbgT/8493/. Any idea?
code as below
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
$('.box').click(function () {
$('.box').each(function () {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
});

You can use a javascript method called setinterval();
setInterval() - executes a function, over and over again, at specified
time intervals.
JSFIDDLE DEMO
setInterval(function(){
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
}, 30000);

setInterval(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
}, 30000);

Can't clearInterval on animation

I have some problem with this code, in this case i set div as a button, when I click the button everything is working as expected but when I want to stop animation with clearInterval it doesn’t work, just keeps looping... What I am doing wrong?
var timeout;
var d1=$(".drum1");
function dani1(){
d1.animate({height:'150px', width:'150px', opacity:'0.4'},"slow");
d1.animate({height:'100px', width:'100px',opacity:'0.8'},"fast");
}
d1.click(function(){
if (!timeout){
timeout = setInterval(dani1, 200);
} else {
clearInterval(timeout);
timeout = null;
}
});
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

You do not need setInterval at all..
var d1 = $(".drum1").data('end', true);
function dani1() {
if (d1.data('end'))
return d1.stop(true, true);
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow")
.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast", dani1);
}
d1.click(function() {
if (!d1.data('end'))
d1.data('end', true);
else {
d1.data('end', false);
dani1();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

The problem is your usage of setInterval(), it will queue a lot of animations every 200ms so even after clearing the interval there are a lot of animations present in the animation queue.
One easy solution is to clear the animation queue also
var timeout;
var d1 = $(".drum1");
function dani1() {
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow");
d1.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast");
}
d1.click(function() {
if (!timeout) {
timeout = setInterval(dani1, 200);
} else {
d1.stop(true, true)
clearInterval(timeout);
timeout = null;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
Without interval
var play;
var d1 = $(".drum1");
function dani1() {
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow");
d1.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast");
return d1.promise();
}
d1.click(function() {
if (play) {
play = false;
d1.stop(true, true)
} else {
play = true;
anim();
}
function anim() {
dani1().done(function() {
if (play === true) {
anim();
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

have to Change click event mouse in mouse out event

With below script written for click event.
I want to use Same code(selectors) for Mouse in, mouse out event
$('.tools_collapsed').wrap('<div class="newparent" />');
var speed = 600;
$('.tools_collapsed').show().css({ right: '-250px' }).hide();
$('.tools_collapsed .collapse_btn').hide();
$('.tools_expand').click(function () {
$('.tools_collapsed').show().animate({ right: '0' }, { duration: speed });
$('.tools_collapsed .collapse_btn').show();
})
$('a.collapsed').click(function () {
$('.tools_expand').css({ display: 'none' });
$('.tools_collapsed').animate({ right: '-250', easing: 'easeOutQuad' }, 400, function () {
$('.tools_collapsed .collapse_btn').css("display", "none");
$('.tools_expand').show("normal");
});
})
}

Try this approach...
function yourFunction(){
//your code here
}
$("#yourSelector").hover(
yourFunction(),
yourFunction()
);

You can try this:
$('.tools_collapsed').wrap('<div class="newparent" />');
var speed = 600;
$('.tools_collapsed').show().css({ right: '-250px' }).hide();
$('.tools_collapsed .collapse_btn').hide();
$('.tools_expand').on( "mouseenter",function () {
$('.tools_collapsed').show().animate({ right: '0' }, { duration: speed });
$('.tools_collapsed .collapse_btn').show();
})
$('.tools_expand').on( "mouseout", function () { // changed from "a.collapsed"
$('.tools_expand').css({ display: 'none' });
$('.tools_collapsed').animate({ right: '-250', easing: 'easeOutQuad' }, 400, function () {
$('.tools_collapsed .collapse_btn').css("display", "none");
$('.tools_expand').show("normal");
});
})