Given
var box = document.querySelector('.box');
document.addEventListener("click", (event) => {
if (!event.target.closest("button")) return;
if(event.target.id === "button") {
box.classList.add('move');
}
});
.box {
width: 100px;
height: 100px;
background-color: #000;
transition: transform 1s;
}
.move {
transform: translateX(20px);
}
<div class="box"></div>
<button id="button">button</button>
with a JS Fiddle here.
I want the box's x-position to increment by 20px on every button click.
I am not sure how to proceed. I initially tried using #KeyForms but that requires the from and to prefixes, on which I cannot (I think) add a variable value. Same issue arises here, it seems I cannot have a variable in the css code which I can increment. Am I using the correct function at all (transition) ?
I also tried
if(event.target.id === "button") {
if(!box.classList.contains('open')){
box.classList.add('open');
}else {
box.classList.remove('open');
}
}
but that seems to move the box back and forth repetitively.
Does anyone have any tips or ideas? (I am adding the Javascript tag, since I suspect this problem may potentially be solved in JS directly).
You can store the x position in a variable, increment by 20 every click and apply it to the transform style property:
var x = 0, box = document.querySelector('.box');
button.addEventListener('click', function() {
x += 20, box.style.transform = `translateX(${x}px)`;
})
.box {
width: 100px;
height: 100px;
background-color: #000;
transition: 1s;
}
<div class="box"></div>
<button id="button">button</button>
Just keep on adding Using javascript style
var button = document.querySelector('#button');
button.onclick = function () {
document.querySelector('.box').style.transform += "translateX(20px)";
};
.box {
width: 100px;
height: 100px;
background-color: #000;
transition: transform 1s;
}
<div class="box"></div>
<button id="button">button</button>
Using javascript style would answer your question. There is CSS style for javascript like box.style.transform = 'translateX(20px)'. In Javascript you can calculate styles values(Of course in CSS changing values with calculating is possible). So I added some codes like below.
var box = document.querySelector('.box');
let cnt = 0;
document.addEventListener("click", (event) => {
if (!event.target.closest("button")) return;
if(event.target.id === "button") {
console.log(box.style.transform)
cnt++;
console.log(cnt)
box.style.transform = `translateX(${20 * cnt}px)`;
}
});
.box {
width: 100px;
height: 100px;
background-color: #000;
transition: transform 1s;
}
.move {
transform: translateX(20px);
}
.move1 {
transform: translateX(-20px);
}
<div class="box"></div>
<button id="button">button</button>
Related
Using JavaScript's click simulation does not work for CSS pseudo-class :active. After I tried some classList methods, it still doesn't work. I just wonder if there are some possible ways to realize that?
Run the snippet below and click the button to see the ripple effect. The ripple effect doesn't repeat automatically with the included setInterval code that simulates a click. It only works with the real click of the button:
const btn = document.querySelector(`button`);
btn.addEventListener(`click`, (e) => {
console.clear();
// try to manually set pseudo-class `:active` ?
btn.classList.toggle('ripple', 'ripple:active');
console.log('classList =', e.target.className);
});
setInterval(() => {
// js simulator click doesn't work for css pseudo-class `:active`
btn.click();
}, 1000);
.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .5s, opacity 1s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: .2;
transition: 0s;
}
<button class="ripple">ripple button</button>
References
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
It is impossible according to the API description so far.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
APIs
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
https://drafts.csswg.org/selectors/#the-active-pseudo
https://html.spec.whatwg.org/multipage/semantics-other.html#concept-selector-active
You can try to recreate "active" event using js and css
CSS :
.ripple {
background-color: red;
}
.ripple:active, .ripple.active {
background-color: green;
}
JS :
let btn = document.querySelector('.ripple');
btn.addEventListener('click', e => {
btn.classList.add('active');
setTimeout(() => {
btn.classList.remove('active');
}, 500);
});
setInterval(() => {
console.log('click');
btn.click();
}, 2000);
I have this piece of css but I want to change the width in the keyframe with a variable in javascript. How can I do that?
#keyframes test {
100% {
width: 100%;
}
}
Does it have to be a keyframe animation? Typically you would use the CSS transition property for this kind of animation powered by JavaScript, like this:
var width = 50;
document.getElementById('button').addEventListener('click', () => {
width += 50;
document.getElementById('box').style.width = `${width}px`;
});
#box {
background: red;
height: 50px;
width: 50px;
transition: width .5s;
margin-bottom: 1em;
}
<div id="box"></div>
<button id="button">Change Width</button>
If you have a more general animation (that can't be encompassed by just doing a transition) then you can use JS to set a CSS variable.
Taking the example in the question, replace the 100% with a variable:
#keyframes test {
100% {
width: var(--bg);
}
}
and the Javascript you'd have something like:
thediv.style.setProperty('--bg', '60px');
#JohnUleis already answeared correctly. I was too late. But I add just for fun a solution. Is named: How lfar is Rom? ;-)
Cheers
let root = document.documentElement;
const div = document.querySelector('div');
root.addEventListener("mousemove", e => {
div.style.setProperty('--width', e.clientX + "px");
div.innerHTML = e.clientX + ' km';
});
:root {
--width: 100%;
}
div {
background: hotpink;
width: var(--width);
text-align: center;
color: white;
}
<div>how far is rom?</div>
I want my navbar to be transparent, but when the user scrolls a bit I want it to change to a solid color and I am using bootstrap for the navbar, I have done the code that is needed with javascript.
I had this javascript in my HTML file, but it doesn't seems to work and I don't really know why
<script>
var myNav = document.getElementById("mynav");
window.onscroll = function() {
use strict";
if (document.body.scrollTop >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
</script>
and I have also added the CSS code.
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
I don't know why it doesn't work, it is not displaying any errors, I have also manually put the class and it worked so the problem is from the js code and not the CSS.
Use scrollY property of Window object.
See the Snippet below:
var myNav = document.getElementById("mynav");
window.onscroll = function() {
if (window.scrollY >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
.main-container{
height: 1000px;
}
#mynav{
position: fixed;
background-color: gray;
height: 50px;
margin:0 auto;
top: 0;
bottom:0;
line-height: 50px;
padding:5px;
width: 100%;
}
<div class="main-container">
<div class="mynav" id="mynav">
Hello World! this is mynav
</div>
</div>
Try using window.scrollY instead of document.body.scrollTop.
if (window.scrollY >= 100)
You can also use document.documentElement.scrollTop. It's the html element that actually scrolls, not the body. Typically document.body.scrollTop will always be 0.
My goal is to rotate a div 180deg on each click, without toggling CSS classes.
I can achieve one rotation with the first click (.style.transform =
"rotate(180deg)";), but any subsequent click has no effect.
BTW, why exactly is that? The div's Id hasn't changed, so, in theory, the same trigger (a click, in this case) should call the same function, right? But it doesn't. I wonder what's the logic here, what's the technical explanation, and, moving to practice, how can I further manipulate this post-div (that is, the original div after its JavaScript manipulation) -- again, without toggling CSS classes.
function rotate() {
document.getElementById("container").style.transform =
"rotate(180deg)";
}
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
}
<div class="container" id="container" onclick="rotate()"></div>
The first time you change the transformation from "" to "rotate(180deg)", so it rotates.
Subsequent times you change it from "rotate(180deg)" to "rotate(180deg)" … which isn't a change at all, so nothing happens.
If you want to change it, then you need to actually assign a different value to it.
e.g.
const style = document.getElementById("container").style;
if (style.transform) {
style.transform = "";
} else {
style.transform = "rotate(180deg)";
}
Toggling a class is simpler, and clearer.
document.querySelector("#container").addEventListener("click", e => e.currentTarget.classList.toggle("rotated"));
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
transition: transform 0.25s;
}
.rotated {
transform: rotate(180deg);
}
<div class="container" id="container"></div>
You need to check the transform value and then rotate it anti-clockwise.
Here is the code:
HTML
<div class="container" id="container" onclick="rotate()"></div>
CSS
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
}
JS
function rotate() {
document.getElementById("container").style.transform =
document.getElementById("container").style.transform ===
"rotate(180deg)" ? "rotate(0deg)" : "rotate(180deg)";
}
Here is an example in codepen
The reason why the div is not rotating after first function call is that you are setting the transform style property to constant value (180deg). After first call the transform is performed and all following calls set transform to exactly the same value. In order to make it work, you have to increment rotate property each time you call the function.
In example:
let rotation = 0;
function rotate() {
document.getElementById("container").style.transform = `rotate(${rotation}deg)`;
rotation = (rotation + 180) % 360;
}
I made a fiddle , but basically, you can't rotate for the same value. Of course this is very raw, but prove the concept for you to understand. You can do it more programatically of course.
document.getElementById('container').addEventListener('click', function () {
this.style.transform = this.style.transform == "rotate(180deg)" ? "rotate(-90deg)" : "rotate(180deg)";
}
);
You can check this out: tutorial
<script>
var degrees = 0;
function rotate() {
if(degrees == 180){
document.getElementById("container").style.transform =
"rotate(360deg)";
degrees= 0;
}else{
document.getElementById("container").style.transform =
"rotate(180deg)";
degrees= 180;
}
}
</script>
Clearly is not optimized but could help you.
JSFiddle here
Others have answered your question already, so I will provide with an example to make your code a little bit more dynamic.
/**
* Rotate an <element> with a certain angle <rotateBy>
* 'this' is a reference to itself, which is passed by as an argument from the HTML.
* Change '180' in the method call to whatever to have it rotate differently.
*/
function rotate(element, rotateBy) {
var currentRotation = element.rotation || 0; // default to zero if not existing
newRotation = rotateBy + currentRotation;
element.rotation = newRotation; // store the property in the element
element.style.transform = "rotate(" + newRotation + "deg)";
}
.container {
width: 200px;
height: 400px;
border: 5px solid;
border-bottom-color: blue;
border-top-color: red;
transition: transform 400ms;
}
<div class="container" onclick="rotate(this, 180)"
></div>
I was trying to create a similar effect on up and down arrows as shown in the image below but got stuck midway because of my low javascript/jquery skills.
I can't figure out how to make the text appear and then fade away on click with color change.
Here's a link to the fiddle just in case SO code snippet doesn't work
$("span").click(function() {
$("span").css("color", "grey");
$(this).css("color", "red");
});
ul > li{
list-style:none;
}
span {
cursor: pointer;
}
.fa {
font-size: 55px;
text-indent: 200px;
margin-bottom: 20px;
margin-top:30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li>
<li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span></li>
</ul>
So far none of the answers have worked for me so I am asking for more help on this.
I saw this effect on reddit and I've tried many times and spent so much time but failed to get the similar effect. I'd really appreciate it if anybody could help me understand and create the exact effect.
here is my version of the solution, https://jsfiddle.net/hnk1vw6x/33/
see some explanations below.
HTML
<div class="padding-container">
<span id="rating">0</span>
<a class="arrow fa fa-arrow-up" data-animation-text="Nice!" data-value="1"></a><br/>
<a class="arrow fa fa-arrow-down" data-animation-text="Troll" data-value="-1"></a>
</div>
CSS
.padding-container {
width: 60px;
margin: 100px;
}
#rating {
float: right;
font-size: 2.1em;
width: auto;
}
a.arrow {
display: inline-block;
position: relative;
cursor: pointer;
}
a.arrow:after {
content: attr(data-animation-text);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: auto;
opacity: 0;
}
a.arrow.fa-arrow-up {
color: #FF0000;
}
a.arrow.fa-arrow-down {
color: #0000FF;
}
a.arrow.fa-arrow-up:after {
bottom: 100%;
}
a.arrow.fa-arrow-down:after {
top: 100%;
}
a.arrow.animate.fa-arrow-up:after {
animation-name: slideup, bounce;
animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
animation-name: slidedown, bounce;
animation-duration: 3s;
}
#keyframes slideup {
from {
bottom: 100%;
opacity: 1;
}
to {
bottom: 300%;
opacity: 0;
}
}
#keyframes slidedown {
from {
top: 100%;
opacity: 1;
}
to {
top: 300%;
opacity: 0;
}
}
#keyframes bounce {
from {
font-size: 1em;
}
3% {
font-size: 1.25em;
}
6% {
font-size: 0.75em;
}
9% {
font-size: 1em;
}
}
JavaScript
function arrowAnimationEndHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
}
function arrowClickHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
setTimeout(function () {
arrow.className += ' animate';
}, 0);
ratingUpdateBusinessLogic(arrow);
}
function ratingUpdateBusinessLogic(arrow) {
if (typeof ratingElement === 'undefined') {
return;
}
var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
arrows[i].addEventListener("click", arrowClickHandler, false);
}
Now little bit of explanation:
The problem is quite complex and author is asking for a complete solution rather then explanation of one aspect which is not clear. I decided to give an answer because then I can outline the software design steps, which might
help someone else to solve another complex problem.
In my opinion the key to complex tasks is the ability to split them in smaller, which in turn are easier to approach. Let's try to split this task into smaller pieces:
We need to draw two arrows and a number.
Up and down arrows should have different colors.
We need to draw the arrow tooltips/labels next to them.
We need to animate the arrow tooltips/labels on user interaction.
We need to apply our business logic (change the rating) on user input.
Now let's try to solve those smaller problems one by one:
We need to draw two arrows and a number. Well, HTML is our friend here and below is a trivial html code. I'm using font-awesome to draw the actual arrow icons.
<div class="padding-container">
<span id="rating">0</span>
<a class="arrow fa fa-arrow-up"></a>
<a class="arrow fa fa-arrow-down"></a>
</div>
We want our arrows to be positioned in a certain way on the screen, let's make the arrows inline-blocks, and add a line-break between them, also add some CSS to line up:
.padding-container {
width: 60px;
margin: 100px;
}
#rating {
float: right;
font-size: 2.1em;
width: auto;
}
a.arrow {
display: inline-block;
cursor: pointer;
}
Our arrows should have different colors. Again trivial CSS here. The colors are not 100% like in the gif, but that is the question of making the screenshot and picking the right color - you can do it yourself.
a.arrow.fa-arrow-up {
color: #FF0000;
}
a.arrow.fa-arrow-down {
color: #0000FF;
}
We need to draw the arrow tooltips/labels next to them. Ok, that starts to be interesting. Let's use the :after pseudo-element to draw our tooltips, because those tooltips are part of representation (and not content), they don't need to be reflected in the html structure.
I use :after and not :before because font-awesome is using before for the arrow icon rendering ;) Let's also use absolute positioning to place them relative to the actual arrows. That gives us the following CSS:
a.arrow {
position: relative;
}
a.arrow:after {
content: attr(data-animation-text);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: auto;
}
a.arrow.fa-arrow-up:after {
bottom: 100%;
}
a.arrow.fa-arrow-down:after {
top: 100%;
}
Now, our tooltips are rendered just next to the arrows, and we have the possibility to control the content of them through html, e.g. for translation purposes.
Tooltips are also centered relative to the arrows.
We need to animate the arrow tooltips/labels on user interaction.
We can animate elements by javascript and we can also do that via CSS. Doing it via CSS is way more efficient, so unless we need to support really old browsers, let's stick to CSS.
We need to implement two animations, one is tooltip fading together with lift/drop and the second one is the tooltip bounce.
Let's what CSS has to offer:
a.arrow:after {
opacity: 0;
}
a.arrow.fa-arrow-up:after {
animation-name: slideup, bounce;
animation-duration: 3s;
}
a.arrow.fa-arrow-down:after {
animation-name: slidedown, bounce;
animation-duration: 3s;
}
#keyframes slideup {
from {
bottom: 100%;
opacity: 1;
}
to {
bottom: 300%;
opacity: 0;
}
}
#keyframes slidedown {
from {
top: 100%;
opacity: 1;
}
to {
top: 300%;
opacity: 0;
}
}
#keyframes bounce {
from {
font-size: 1em;
}
3% {
font-size: 1.25em;
}
6% {
font-size: 0.75em;
}
9% {
font-size: 1em;
}
}
Now we see a nice label animation straight after we load the page. All that was done without a single line of JavaScript so far.
But the task says we need to animate on user interaction.
Ok, let's now add some javascript. But before that we need a possibility to trigger the animation, let's trigger it using CSS class: animate, our CSS then changes like
a.arrow.animate.fa-arrow-up:after {
animation-name: slideup, bounce;
animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
animation-name: slidedown, bounce;
animation-duration: 3s;
}
Note added animate class. If we now manually add the class to the HTML - we will see the animation again. But we need that to happen on user click, well that is easy:
function arrowClickHandler(e) {
var arrow = e.target;
arrow.className += ' animate';
}
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("click", arrowClickHandler, false);
}
Now, if we load the page and click the arrow - we will see the animation, but only once. We need to find a way to reset it. Let's remove the animate class on animation finish.
function arrowAnimationEndHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
}
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
}
Now, we can click the arrow and see an animation as many times as we want. But there is a problem, we can't restart the animation if it is going already.
For that we need a little trick:
function arrowClickHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
setTimeout(function () {
arrow.className += ' animate';
}, 0);
}
as long as we remote the animate class - we give the browser a chance to execute it's code and stop the animation and then we add the animate class again.
We need to apply our business logic (change the rating) on user input.
Here is no rocket science, we read current value and update it according to the values we have assigned to arrows:
function arrowClickHandler(e) {
...
ratingUpdateBusinessLogic(arrow);
}
function ratingUpdateBusinessLogic(arrow) {
if (typeof ratingElement === 'undefined') {
return;
}
var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");
UPDATE:
solution with glyphicons would require replacing css/html classes fa fa-arrow-up and fa fa-arrow-down with corresponding glyphicon classes, i.e.: glyphicon glyphicon-arrow-up and glyphicon glyphicon-arrow-down. After little thinking I also decided to unbind the custom css from library classes and added custom arrow-up and arrow-down classes to simplify the icon library replacement:
<a class="arrow arrow-up glyphicon glyphicon-arrow-up" data-animation-text="Sick!" data-value="1"></a>
<a class="arrow arrow-down glyphicon glyphicon-arrow-down" data-animation-text="Suck!" data-value="-1"></a>
CSS
a.arrow.arrow-up {
.
}
a.arrow.arrow-down {
...
}
a.arrow.arrow-up:after {
...
}
a.arrow.arrow-down:after {
...
}
a.arrow.animate.arrow-up:after {
...
}
a.arrow.animate.arrow-down:after {
...
}
You can use jquery animate to get that effect. Try this
EDIT:
for exact effect use jquery easing plugin and give
easeOutElastic easing effect
$("#select1").click(function() {
$(".nice").css("display","block");
$(".nice").animate({
top: -10,
}, 500, "easeOutElastic", function() {
// Animation complete.
$(".nice").css({"opacity":"1", "top":"10px","display":"none"});
});
});
$("#select2").click(function(){
$(".troll").css("display","block");
$(".troll").animate({
top: 130,
}, 500,"easeOutElastic", function(){
$(".troll").css({"opacity":"1", "top":"120px","display":"none"});
});
});
ul > li{
list-style:none;
}
span {
cursor: pointer;
}
.fa {
font-size: 55px;
text-indent: 200px;
margin-bottom: 20px;
margin-top:30px;
}
.nice{
position:absolute;
top:10px;
text-indent :190px;
display:none;
}
.troll{
position:absolute;
top:120px;
text-indent : 190px;
display:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<ul>
<li>
<p class="nice">Nice</p>
<span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li>
<li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span>
<p class="troll">Troll</p>
</li>
</ul>
Just Add the text and show/hide it with the help of fadeout and fadein property of Jquery.
Check your updated fiddle
$("span").click(function() {
if($(this).attr('id')=='select1')
{
$("#downText").fadeOut(300);
$("#upText").fadeIn(300);
}
else
{
$("#upText").fadeOut(300);
$("#downText").fadeIn(300);
}
$("span").css("color", "grey");
$(this).css("color", "red");
});
$("fa").click(function(){
$("fa").fadeTo("slow", 0.15);
});
Add a setTimeout to make the text fade out after a few milliseconds:
$("span").click(function() {
$("span").css("color", "grey");
$(this).css("color", "red");
});
$("#select1").click(function() {
$("#down").fadeOut(300);
$("#up").fadeIn(300);
setTimeout(function() {
$("#up").fadeOut(300); // fade out the up text
}, 300); // delay of 0.3s before fading out
});
$("#select2").click(function() {
$("#up").fadeOut(300);
$("#down").fadeIn(300);
setTimeout(function() {
$("#down").fadeOut(300); // fade out the down text
}, 300); // delay of 0.3s before fading out
});
jsFiddle: https://jsfiddle.net/qze7mqj4/16/
I also added a position:absolute; to the fading text so that it doesn't make the arrows "jump" around.
You can read more about setTimeout here: http://www.w3schools.com/jsref/met_win_settimeout.asp
Basically it tells the browser to execute a function after a specified number of milliseconds, in this case, we tell the browser to fadeOut() the text after 300ms.