We Keep Coding

How can I animate the addClass() and removeClass jQuery methods? [duplicate]

This question already has answers here:
jQuery.animate() with css class only, without explicit styles
(4 answers)
Closed 5 years ago.
I'm working on a site and want to display and hide sections of it by adding ".hidden" bootstrap class under click events.
Basically:
$('selector').click(function(){
$('*part-to-hide*').addClass("hidden");
$('*part-to-show*').removeClass("hidden");
}
It's working properly but needs some smooth animations. What are my options?
Note: while I'v seen similar questions, I'd consider mine different (and thus not a duplicate) as it centers around the use of the bootstrap "hidden" class. On that note, I'd appreciate it if answers tackle the issue while sticking to the main idea of the code, which is adding and removing the "hidden" class to an element.

just assign a transition property to your element ;)
Check here for more info: https://www.w3schools.com/css/css3_transitions.asp
Fiddle:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

$( document ).ready(function() {
$(".togglediv").on('click',function(){
$(".showdiv").toggleClass("hidden");
$(".hidediv").toggleClass("hidden");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="parent">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="showdiv hidden">
show div
</div>
<div class="hidediv">
hide div
</div>
</div>
<button class="togglediv">show/hide content</button>
</div>
</div></div>

$('#selector').on('click',function(){
if($(this).attr("data-animate")=="0"){
$('#Div1').removeClass('Div2').addClass('Div1');
$(this).attr("data-animate","1");
$(this).val("Change color");
}
else{
$('#Div1').removeClass('Div1').addClass('Div2');
$(this).attr("data-animate","0");
$(this).val("start animate");
}
});
.Div2{
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example2;
animation-duration: 4s;
}
.Div1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}
#-webkit-keyframes example2 {
0% {background-color:red;}
25% {background-color:yellow; }
50% {background-color:blue; }
75% {background-color:green; }
100% {background-color:red;}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="selector" type="button" data-animate="0" value="start animate"/>
<div id="Div1"></div>

jQuery Rotate CSS meter

I found some CSS that moves a needle like a VU meter. This mimics what I want to do. However it does a full animation from start to finish. Whereas I would like to make the change happen through a series of clicks. I'm trying to figure out how to do that and I am unsuccessful. I would like to know how I can make the needle move in the same way only through clicks
CSS
.gauge {
position:relative;
width:120px;
height:120px;
margin:10px;
display:inline-block;
}
.needle-assembly {
position:absolute;
top: 0%;
left:46%;
height:100%;
width:10%;
-webkit-transform: rotate(-45deg);
}
.needle-holder {
position:relative;
top:0;
left:0;
height:60%;
width:100%;
}
.needle {
position:absolute;
background-color:#A00;
height:100%;
width:20%;
left:40%;
}
#-webkit-keyframes moveNeedle
{
0% {-webkit-transform: rotate(-45deg);}
60% {-webkit-transform: rotate(55deg);}
65% {-webkit-transform: rotate(50deg);}
100% {-webkit-transform: rotate(65deg);}
}
#gauge {
-webkit-transform-origin:50% 50%;
-webkit-animation: moveNeedle 5s;
-webkit-animation-fill-mode: forwards;
}
HTML
<div class="gauge" style="height:140px; width:140px;">
<div class="needle-assembly" id="gauge">
<div class="needle-holder">
<div class="needle"></div>
</div>
</div>
</div>
jQuery
$('#gauge').click(function(){
$('#gauge').css({transform: 'rotate(45deg)'})
});
fiddle

It doesn't move when you click it because you are setting it to a static value.
You need to change the value somehow.
var deg=45;
$('#gauge').click(function(){
var t = 'rotate(' + deg +'deg)';
$('#gauge').css({transform: t})
deg = deg+5;
});
http://jsfiddle.net/4xc3wnux/6/

How To Move/Animate A DIV Background Image Smoothly Vertical?

I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...
<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>
CODE 1:) http://jsfiddle.net/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.
CODE 2:) http://jsfiddle.net/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.
I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???

If you can get away with using 2 divs you can get it to work like this:
Working Example
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
height:200%; /* the inner div will need to be twice as tall as the outer div */
width:100%;
-webkit-animation:mymove 5s linear infinite;
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
#-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}

As per Muhammad's request i'll add my fiddle as an answer.
VanillaJS using requestAnimationFrame for that butter smooth slide :)
http://jsfiddle.net/hY5Dx/103/
Code to please SO:
var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
y++;
body.style.backgroundPosition = '0 ' + y + 'px';
requestAnimationFrame(move);
}

As there is too much comments after #Skynet answer, here I add the one I wrote following his base structure.
So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.
Basically for what you want to do, you have to animate the background-position property, only on y axis.
Here is the CSS code
/* Following defines how the animation 'mymove' will run */
#keyframes mymove {
/* 0% is the beginning of animation */
0% {
background-position: 0 0;
}
/* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
100% {
background-position: 0 860px;
}
}
/* same for webkit browsers */
#-webkit-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
height: 366px;
text-align:center;
/* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
animation: mymove 5s linear infinite;
/* again webkit browsers */
-webkit-animation:mymove 5s linear infinite;
background: url('http://i.imgur.com/zF1zrkC.jpg');
}
And here we are.
The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.

<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-size: 200% 100%;
background-repeat: repeat-y;
}
#keyframes mymove {
100% {
transform: translate3d(0px, -400px, 0px);
}
}
#-webkit-keyframes mymove
/* Safari and Chrome */
{
100% {
transform: translate3d(0px, -400px, 0px);
}
}
check jsfiddle

Show an image from b&w to color as if it were loading (left to right)

I don't know how to make clearer the title of the question.
I have an effect where it shows a text with grey color and with keyframes in css the characters become black with the animate css property.
I wonder how could I acomplish that effect but with an image, transitioning from b&w to color from the left to the right.
This is the code:
<div class="modal">
<h1 id="testid" data-content="THIS IS A TEST">THIS IS A TEST</h1>
</div>
And the CSS:
#-webkit-keyframes loading{
from{max-width:0}
}
#-moz-keyframes loading{
from{max-width:0}
}
#-o-keyframes loading{
from{max-width:0}
}
#keyframes loading{
from{max-width:0}
}
.modal {
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999999;
}
.modal h1 {
position:absolute;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-125px;
font-size:30px;
text-align:center;
color:rgba(0,0,0,.2);
}
.modal h1:before {
content:attr(data-content);
position:absolute;
overflow:hidden;
color:#000;
max-width:100%;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
}
The code running here: http://jsfiddle.net/5Vmnn/
Thank you

Maybe you were thinking of something like this?
Fiddle
It's not greyscale, but it provides a similar effect.
EDIT: Here's a version for Webkit with greyscale using -webkit-filter (still right-to-left...)
I've changed your overlay to use opacity, but the principle is the same:
.modal {
opacity: 0.8;
background:black;
z-index:9999999;
position: absolute;
left: 0;
top: 0;
max-width:0;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
width: 100%;
height: 100%;
}

I would make an animated GIF which I think is far easier.
Make 5-10 images each a varying amount b&w and colour and then use ImageMagick to make an animated GIF out of them with a single line like this:
convert -delay 20 -loop 0 *.jpg animated.gif
You may want loop=1 for a single loop, whereas I have it set to zero for infinite looping in the example.
View animated GIF here
In case you are not familiar with Photoshop, I added a Hue Saturation layer and cranked the Saturation down to zero making a black and white image. Then I pressed G for Gradient Tool and drew a horizontal line across the image to specify where the transition is from B&W to colour whilst holding the Shift key to ensure it was horizontal. Then saved it as a 1.jpg and redrew the gradient in a different place and saved it again as 2.jpg and so on.

Make html inputs flow

i am trying to move button Like this demo .Using css animation i can move in a straight forward animation. Is it possible to move off the screen and come in the screen and a particlular movement and direction to a box like the link.here is what i have done.
HTML
<div id="box" style='width:200px;height:200px;border:1px solid black;'/>
<button id="one" type="button" >Button1</button>
<button id="two" type="button" >Button2</button>
<button id="three" type="button">Button3</button>
CSS
button{
-webkit-appearance:none;
width:40px;
height:40px;
padding: 0;
text-align: center;
vertical-align: middle;
border: 1px solid red;
font-size:10px;
font-weight:bold;
}
#one, #two, #three
{
position:relative;
}
#one
{
-webkit-animation:levelseven 16s infinite;
-webkit-animation-direction:alternate;
}
#two
{
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:levelseven_1 8s infinite;
}
#three
{
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:levelseven_2 10s infinite;
}
#-webkit-keyframes levelseven /* Safari and Chrome */
{
0% { left:0px; top:0px;}
25% { left:200px; top:0px;}
50% { left:100px; top:200px;}
75% { left:150px; top:50px;}
100% {background:cyan; left:0px; top:0px;}
}
#-webkit-keyframes levelseven_1 /* Safari and Chrome */
{
0% { left:0px; top:0px;}
50% {background:darkgoldenrod; left:0px; top:200px;}
100% { left:0px; top:0px;}
}
#-webkit-keyframes levelseven_2 /* Safari and Chrome */
{
0% { left:0px; top:0px;}
50% {left:200px; top:0px;}
100% {left:0px; top:0px;}
}
Here's demo

Here is a logic very simple one
What it basically does is it interchanges the classes periodically so that buttons navigation path changes so as to give view of dynamic path
function timer() {
console.log("timer!");
var className1 = $('#oneId').attr('class');
var className2 = $('#twoId').attr('class');
var className3 = $('#threeId').attr('class');
$( "#oneId" ).removeClass(className1);
$( "#twoId" ).removeClass(className2 );
$( "#threeId" ).removeClass(className3);
$( "#oneId" ).addClass(className2);
$( "#twoId" ).addClass(className3);
$( "#threeId" ).addClass( className1);
// alert("class changed"+className1+":"+$('#oneId').attr('class')+","+className2+$('#twoId').attr('class')+","+className3+":"+$('#threeId').attr('class'));
}
window.setInterval(timer, 10000);
Logic to make it more like the demo you have provided
Create a number of paths that means you have to create more than 3 or 4 set of class one,two,three variants
Periodically each path so that corresponding function for each path triggers and path changes accordingly period .The set period have to change when box exits square box's border so a 2000 or so milliseconds
Give different starting and ending points for top and left of #-webkit-keyframes
so as each path looks unique
Give values that are out of the range of box so that it gives the effect of entering through one side and leaving through other