We Keep Coding

Looking for an efficient way to animate toggle class

I have a CSS class that has left-margin: 150px and I just want to function it in an animated way.
ToggleClass in jQuery works but without any animation.
$(this).toggleClass("active", 1000, "easeInOutQuad");
I managed to do it animated using addClass and removeClass. But I am wondering if there is any easier way to do it. it takes 10 lines of code while there should be something much more efficient.
Any ideas?
$(".box").on('click tap', function() {
if($(this).hasClass('active')){
$(this).animate({
marginLeft: "-=150px",
}, 500, function() {
$(this).removeClass('active');
});
}else{
$(this).animate({
marginLeft: "+=150px",
}, 500, function() {
$(this).addClass('active');
});
}
});
// $(this).toggleClass("active", 1000, "easeInOutQuad");
.box{
width: 100px;
height: 100px;
background-color: red;
}
.active{
margin-left: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"> BOX </div>

I'd use CSS transition to do it. Add transition: margin-left 0.5s; (or similar) to your .box style rules:
$(".box").on('click tap', function() {
$(this).toggleClass('active');
});
.box {
width: 100px;
height: 100px;
background-color: red;
transition: margin-left 0.5s; /* <== */
}
.active {
margin-left: 150px;
}
<div class="box"> BOX </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Stopping jquery process

I have one div hidden out of page and one part is visible like:
div{
left: -100px;
width: 150px;
height: 50px;
}
I used jquery to show whole div:
$("div").hover(function(){
$("div").animate({left: '0px'});
},function(){
$("div").animate({left: '-100px'});
});
When I hover over the div and quickly unhover over it multiple times, It seems to play the animation the same amount of times I do this. How can I make it stop mid-animation if I stop hovering over the div, and how can I make the animation start only after I have hovered over it for a certain amount of time.

You can use .stop() to stop the previous animation.
$("div").hover(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, function() {
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
If you want it to wait until you've been hovering for a bit before the animation starts, you can use setTimeout, and you can cancel the timeout in the unhover function.
var hoverTimer;
$("div").hover(function() {
hoverTimer = setTimeout(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, 1000);
}, function() {
clearTimeout(hoverTimer);
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Duration of animation decreases as window is shrunk

Why is it that even though I have this animation's duration set to 2 seconds, shrinking the window results in there being a greater delay at first, and a faster animation?
See Bootply.
JS:
function animateit() {
$('.wrapper .water').animate({
'height': '350px',
'top': 0
}, 2000, function () {
$('.wrapper .water').animate({
'height': 0,
'top': '350px'
}, 2000, animateit);
});
}
animateit();
CSS:
.wrapper {
position: relative;
height:auto;
width: 100%;
max-width: 350px;
overflow:hidden;
}
.img-responsive {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.glass {
position:absolute;
left:0px;
top:0px;
z-index:5;
}
.hide-image {
display: block;
opacity: 0;
width: 100%;
}
.water {
position:absolute;
left:0px;
right: 0;
top:350px;
background-color:#67d9ff;
height:0px;
display:block;
}
HTML:
<div class="wrapper">
<img class="hide-image" src="http://www.videsignz.com/testing/images/water-front2.png">
<img class="glass img-responsive" src="http://www.videsignz.com/testing/images/water-front2.png">
<div class="water"></div>
</div>
I noticed that for the second part of the animation's JS, changing 'top': '350px' to 'top': '100%' caused the it's duration to be relatively consistent regardless of window size, but applying that code to the filling of the glass doesn't yield the same result - and it also alters the animation in normal view nonetheless.

Slide a div offscreen using jQuery

This is a bit of a challenge. Here's what I'm looking for:
3 divs on screen
Div 1 resides in the middle of the page (centered)
Div 2 resides just off the screen on the far left
Div 3 resides just off the screen on the far right
OnClick, Div 1 slides to the position Div 2 was (to the left), Div 2 slides off the screen entirely, Div 3 slides to where Div 3 was (middle, centered). A new div arrives on the right.
I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen.
Any thoughts?
For an example of what I'm describing, visit Groupon.com. I thought it was a cool idea, and have given myself the challenge of recreating it. So far, no dice.
-D

Something like this?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
This is the basic functionality. It doesn't scale to more divs, etc, but that should get you started.
The key is to wrap your elements in a container and make the overflow hidden.
Update:
Here's a slightly better version that handles any number of divs (greater than 1):
http://jsfiddle.net/jtbowden/ykbgT/1/
Simplified further:
http://jsfiddle.net/jtbowden/ykbgT/2/
Code snippet:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>

Maybe I misinterpreted. I though you wanted three divs in a row, and only the ones on the end sliding and whatnot.
http://jsfiddle.net/acsfy/
(I know you're using jQuery for this, but it pissed me off as I was trying to force it to work. You'd have to adapt this for your purposes.)

Extending Jeff B answer, i've included Hammer.js and made a circular list.
$(function() {
$("#esq").click(function() {
console.log("Esquerda !");
var obj = $(".ativo");
$(obj).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '+150%');
$(this).appendTo('#container');
});
$(obj).next().animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
$("#dir").click(function() {
console.log("Direita !");
var obj = $(".ativo");
var prox = $(obj).siblings(":last");
$(obj).animate({
left: '+150%'
}, 500, function() {
$(prox).prependTo('#container');
});
$(prox).css('left', '-50%');
$(prox).animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
var hammertime = new Hammer(document.getElementById("container"));
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
hammertime.on('swipeleft', function() {
$("#esq").trigger("click");
});
hammertime.on('swiperight', function() {
$("#dir").trigger("click");
});
});
Example in: http://jsfiddle.net/tvLt1r9h/2/

And... not a year too late. If you want it to start on the first div, your css needs to look like this.
#box1 { background-color:#333; }
#box2 { background-color:#333; left: -50%; }
#box3 { background-color:#333; left: 150%; }
#box4 { background-color:#333; left: 150%; }
#box5 { background-color:#333; left: 150%; }

jQuery animate() to hide and show elements by sliding left and right

I'm trying to animate something using jQuery.
UPDATE
I have it working the way I want it. This is the jQuery:
$(document).ready(function() {
// go chat button
$('#go-chat input').click(function() {
$('#search, #go-chat').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
});
The problem now is that the text is wrapping as the slide happens and it is very ugly. How could I make it so that the text slides in/out as the search bar and the input fields without it wrapping as the width narrows/expands?
Thanks.
OLD QUESTION
Basically, I want to slide in the search bar to the left, essentially hiding it, and then slide out the 4 inputs below it. For now, I've placed them under the search bar but my plan is to hide them, and when the "Go Chat" button is pressed, the search slides out to the left and the 4 inputs slide in to the right.
Right now, the search box slides in to the center and doesn't disappear fully. How can I make it so it functions as I want it? If my explanation is unclear as to what I'm looking for, please ask for clarification.
Thanks.

Try changing
$('#search').animate({
width: '0px',
},
'1000'
);
to
$('#search').animate({ width: '0px' }, 1000, function() {
$(this).hide();
});
Once the animation is complete, the element will be hidden.
I also noticed that the 'Search' text isn't animated well.
Before doing the animate, try removing (or fading out) the text. Remember to show it again when toggling back. Eg:
$('#search-label').hide();
OR
$('#search-label').fadeOut();

I figured it out. To make it slide to the left, I gave the corresponding surrounding <div>s a width and margin-left: 0px;. Then I had the issue of the text wrapping as the width narrowed/widened. To fix that, I added white-space: nowrap; to the CSS for the corresponding <div>s.
Here's the jQuery:
$(document).ready(function() {
$('#go-chat input').click(function() {
$('#search, #go-chat').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
});
... and the CSS:
#search {
border: 1px solid #999999;
-moz-border-radius: 5px;
width: 573px;
height: 40px;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-chat {
width: 575px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
}
#login {
border: 0px;
width: 0px;
display: none;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-search {
width: 0px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
display: none;
}
If anyone has suggestions on the way I formatted the jQuery, please let me know what you think... do you like the way I formatted? I feel like it looks a bit awkward.

$('#search').animate({width: '0'}, 1000, function(){
$(this).hide();
});
The page kind of freaks out on toggle...mind your selectors.