Develop Reference

Animate text using intervals (and timeouts?) Javascript, JQuery

I would like to make a Text run from left to right in a loop. Here is the fiddle with my attempt:
https://jsfiddle.net/9Lruxym8/33/
I started with css #keyframes but I think I need the width of the text itself if I want the text to run seamlessly. My idea was to write down the text two times and once the div with the texts has run exactly halfway, the animation starts again.
After #keyframes didn't work, I tried jQuery animation. It did work somewhat but didn't run smoothly. Now I'd like to do it via transition. I thought a combination of intervals and timeouts could do the trick but I still don't get it to work - and now, I don't know why. Does anyone have a hit for me?
function runText() {
var text_width = $('#runningP').width()/2;
console.log(text_width)
setInterval(function(){
console.log("interval");
$('.text').css({'transition':'margin-left 5s'});
$('.text').css({'margin-left':'-' + text_width + 'px'});
moveBack();
}, 3000);
function moveBack() {
console.log("timeout")
setTimeout(function(){
$('.text').css({'transition':'none'});
$('.text').css({'margin-left': 0});
}, 3000);
}
}
runText();

I've recently made a bit of custom code for this functionality.
Looking at my code, it seems a bit much having essentially 3 "levels" (.scrollTextWrap > .scrollingText > .scrollContent) but this was the structure I ended up using to get a clean and consistent effect.
I've added in an initialiser too so that you could simply add the scrollMe class and have them setup the html for you
In the snippet I've added a .parentContainer purely to show how it works when constrained
$(document)
.ready(function(){
// check that scrollingText has 2 scrollContent element
$('.scrollMe')
.each(function(){
initScrollingText($(this));
});
});
function initScrollingText($this){
// store text
var text = $this.text();
// empty element
$this.html(null);
var $wrap = $('<div class="scrollTextWrap" />'),
$text = $('<div class="scrollingText" />'),
$content = $('<div class="scrollContent" />');
// set content value
$content.text(text);
// duplicate content
$text
.append($content)
.append($content.clone());
// append text to wrap
$wrap.append($text)
// add $wrap to DOM
$wrap.insertAfter($this);
// remove old element
$this.remove();
}
/* to simulate width constraints */
.parentContainer {
width: 140px;
position:relative;
overflow:hidden;
}
.scrollTextWrap {
position:relative;
width:auto;
display:inline-block;
}
.scrollingText {
display: flex;
position:relative;
transition:left 0.1s;
animation: scrollText 5s infinite linear;
}
.scrollContent {
white-space: nowrap;
padding-right:5px;
}
#keyframes scrollText {
0% { left:0 }
100% { left:-50% }
}
<div class="parentContainer">
<div class="scrollMe">Content you want to scroll goes here</div>
<!-- alternatively you can just structure the html -->
<div class="scrollTextWrap">
<div class="scrollingText">
<div class="scrollContent">Content you want to scroll goes here</div>
<div class="scrollContent">Content you want to scroll goes here</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Setting background color + opacity in js except a button

When something happens I am setting body background-color to grey and decrease opacity. However that obviously changes opacity of a button as well.
What I want to achieve is when action occur, change opacity of everything except the button.
var highlight = $('#' + scroll).closest('div').find('button');
$('body').css('opacity', '0.2');
$('body').css('background-color', 'grey');
$(highlight).css('background-color', '#FDFF47');
$(highlight).css('opacity', '1');
How can that be done?

In background-color use rgba() to reduce opacity only to background. opacity property is not needed.
$('body').css('background-color', 'rgba(128, 128, 128, 0.5)');
About rgba(R, G, B, A) - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()

When you are trying to set background with opacity use rgba which stands for Red,Blue, Green colors with Opacity(Alpha) where you can pass the last parameter as opacity. use background: rgba(0,0,0,0.2) instead of setting background-color: grey. Check below snippet for reference.
div {
background-color: rgba(0, 0, 0, 0.2);
padding:50px;
}
p {
color: blue;
}
<div>
<p>My Text</p>
</div>

Rather than setting the opacity, you can set the background color with an alpha value:
$('body').css('background-color', 'rgba(192,192,192,0.2)');

try with this jquery code
$(document).ready(function() {
$("#btn").hover(function() {
$("#btn").css('background-color', 'grey');
$("#btn").css('opacity', '0.5');
});
});
#btn {
border: none;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">test</button>

As you write in comments to your question, if you're looking for listen to url changes, I suggest you to have a look to this question.
Instead, if you're looking for execute code when that div is on top of HTML page try something like this:
$(document).on('scroll', function(){
if($('your_div').offset() == 0){
//do stuff when your_div is on top of the page
}
})
This code listen to page scroll, and when your div have an offset of 0px from the top of the page it executes the code in if statement
EDIT
If you do this $(body).css('opacity', '0.2') you're setting opacity for all in body (specifically for all <body>'s children). To set opacity only for some elements, you have to do something tricky: you have to wrap those elements with a div with the same class for all and then set opacity for that class.
I.e.: assuming you wrap that element with a div which class is opacity, if you do $('.opacity').css('opacity', '0.2') only elements in those div will have opacity setted to 0.2.

Text fade in, up and fadeout at same time

Apologies if this seems simple however I cannot seem to get this to work.
I would like to have a div and within that div have text fade in, slide up and fade out all in one motion. So far I can get the text to fade in and slide up in one motion, however, the text pauses before doing the slide fade out animation.
$(document).ready(function () {
$("button").click(function(){
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500);
$('#theDIV').css({'display':'block','opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500);
});
});
#theDIV{display:none; position:relative;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Start Animation</button>
<br>
<br>
<div id="theDIV">Some text</div>

$(document).ready(function () {
$("button").click(function(){
$('#theDIV').css({'display':'none','top':'50px'});
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500);
setTimeout(function(){ $('#theDIV').css({'opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500); }, 1500);
});
});
#theDIV{display:none; position:relative;margin:30px 150px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<br>
<br>
<div id="theDIV">Some text</div>

use transform instead top style:
$('#theDIV').css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','transform':'translateY(-50px)'}, 1500);
$('#theDIV').css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','transform':'translateY(-50px)'}, 1500);

All the answers you receive seems working well excepted that they use Javascript to run the animation (and the top attributes) which both are bad practices for micro-interaction like yours.
I link you a very good articles of Googles about animations using Javascript vs CSS.
And a second one Why Moving Elements With Translate() Is Better Than Pos:abs Top/left by Paul Irish.
Here an example using only a toggle class & Keyframes to run your animation.
$(document).ready(function () {
$("button").click(function(){
$('.show-up-and-fade').toggleClass('animate');
});
});
.show-up-and-fade {
opacity: 0;
transform: translateY(30px);
}
.show-up-and-fade.animate {
animation: show-up-and-fade 2s forwards;
}
#keyframes show-up-and-fade {
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-30px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div class="show-up-and-fade">animated text</div>
Hope it will help you !

Animating class toggle/element swap

I've written a function that swaps a "Menu" button with a "Close" button when clicked (hiding one div and displaying another), and vice versa. I'm struggling to add an animation to the toggle of each swap.
This is what I have:
$(document).ready(function() {
$('#menu-button').on('click', function() {
$('#menu-button').toggleClass('inactive', 1000);
$('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
$('.close-trigger').on('click', function() {
$('#close-button').toggleClass('active').toggleClass('inactive', 1000);
$('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
});
});
I've also tried fadeIn/fadeOut/fadeToggle instead of toggleClass to no avail. The problem with fadeToggle is that both elements briefly appear at the same time, and there's still no fade animation. Is there a better way to program this?

please try this
$(document).ready(function() {
$('#button1').on('click', function() {
$('#button1').hide();
$('#button2').show().addClass('toggle');
});
$('#button2').on('click', function() {
$('#button2').hide();
$('#button1').show().addClass('toggle');
});
});
#button2
{
display:none;
}
.button.toggle
{
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="button1" class="button" >button1</button>
<button id="button2" class="button" >button2</button>

If you wish to use toggleClass, you must accompany it with a CSS transition in your stylesheet. Otherwise, the element will simply disappear, as toggleClass does not provide animation by itself.
A CSS transition would be simple to add to your stylesheet, all that would be necessary would be to place these properties on the rule for your class:
transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */
Remember that properties such as display cannot be animated, so you must control the appearance using a property such as opacity, which can be animated because it is a number.

toggleClass() doesn't allow animation. The second argument is not the time. See the docs:
http://api.jquery.com/toggleclass/
I guess the best for you would be CSS transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
If you don't want to use transition, that would do the thing:
$('#menu-button').on('click', function() {
$('#menu-button').hide();
$('#close-button').fadeIn();
});
$('.close-trigger').on('click', function() {
$('#close-button').hide();
$('#menu-button').fadeIn();
});

Transition on Stretching Div

I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.

For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>

The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>

You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle

Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.