Develop Reference

Stop line by line javascript animation from looping

I'm currently working with a piece of javascript which fades in a paragraph of text line by line.
Javascript isn't by forte and I'm struggling to stop the animation from looping.
Any help and advice on how to achieve this would be great.
Here is a link to a fiddle https://jsfiddle.net/spittman/7wpqkfhj/5
Thanks!
Javascript
$(document).ready(function() {
function fadeInLine(line){
$('<span />', {
html: line.trim(),
style: "opacity: 0"
})
.appendTo($greeting)
.animate({opacity:1}, 500);
}
function rotateLines(interval){
setTimeout(() => {
if(i >= lines.length-1){
i = 0;
interval = 1500;
setTimeout(()=>{ $greeting.empty(); }, interval)
} else {
fadeInLine(lines[i]);
i++;
interval = 1500;
}
rotateLines(interval);
}, interval);
}
const $greeting = $('div#container p');
const text = $greeting.html();
const lines = text.split("\n").filter((e) => e.replace(/\s+/, ""));
let i = 0;
$greeting.empty();
rotateLines();
});
Html
<div id="container">
<p>
There’s another side to London.<br>
Beyond the jurisdiction of The City.<br>
Undiscovered by outsiders.<br>
Loved by insiders.<br>
An ever-changing place...<br>
That teases our wildside and thrills our artside.<br>
Blurs our workside into our playside.<br>
Where we live on the brightside.<br>
And explore our darkside.<br>
Hidden in plain sight, this is Bankside.<br>
London’s other side.<br>
.
</p>
</div>

Put the scheduled call in the else clause, and delete the greeting.empty() line.
function rotateLines(interval){
setTimeout(() => {
if(i >= lines.length-1){
i = 0;
interval = 1500;
// setTimeout(()=>{ $greeting.empty(); }, interval)
} else {
fadeInLine(lines[i]);
i++;
interval = 1500;
rotateLines(interval);
}
// rotateLines(interval);
}, interval);
}
JSFiddle
The animation stops after the whole text has faded in.

Simply get rid of the if-clause that resets the element and counter.
function rotateLines(interval){
setTimeout(() => {
fadeInLine(lines[i]);
i++;
interval = 1500;
rotateLines(interval);
}, interval);
}
JSFiddle

On mouseout stop setInterval

I'm trying to create a simple image rotator on hover effect. It working properly on mouse hover, but doesn't work when mouse out method.
var imgFlip = $("img").data( "flip" );
var imgOriginal = $("img").data( "original" );
var images = imgFlip.split(/,|, |;|; /);
var index = 0;
function rotateImage()
{
$('.img-rotator').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
$('.img-rotator')
.mouseover(function () {
var refreshIntervalId = setInterval (rotateImage, 1000);
})
.mouseout(function () {
$(this).attr('src', imgOriginal);
})
});
Jsfiddle example here - https://jsfiddle.net/wbz35L68/15/
Thank you for any advice

You need to clear the setInterval on mouseout. I also reworked some of your code to clean things up and cache refs. You should also use mouseenter and mouseleave for this.
$(document).ready(function(){
// cache selector
var rotator = $('.img-rotator'),
// grab all data
data = rotator.data(),
// ref flip
imgFlip = data.flip,
// ref original
imgOriginal = data.original,
// get image urls
images = imgFlip.split(/,|, |;|; /),
// start index
index = 0,
// ref interval
refreshIntervalId = null;
function rotateImage(){
rotator.fadeOut('fast', function(){
$(this)
.attr('src', images[index])
.fadeIn('fast', function(){
var last = index === images.length - 1;
index = last ? 0 : index + 1;
});
});
}
rotator
.mouseenter(function(){
refreshIntervalId = setInterval(rotateImage, 1000);
})
.mouseleave(function(){
// clear interval and set null
clearInterval(refreshIntervalId) && (refreshIntervalId = null);
$(this).attr('src', imgOriginal);
})
});
.container {
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<img class="img-rotator" data-flip="http://www.snorkl.tv/dev/loaderMax/images/bird.png, http://www.snorkl.tv/dev/loaderMax/images/whale.png" data-original="http://www.snorkl.tv/dev/loaderMax/images/crab.png" src="http://www.snorkl.tv/dev/loaderMax/images/crab.png" width="320" height="200"/>
</div>
</div>
</div>

slider won't work properly

I am trying to animate my list item towards right but it animate all item towards right at once but I want it to be one after another ..here is my jQuery
var I,
total_slide = $('#slide li').length,
slide = $('#slide li');
function run() {
for (I = 1; I <= total_slide; I++) {
var total = total_slide - I
$(slide).eq(total).animate({
left: '700px'
}, 4000);
}
}
run()

You have to use setTimeout function to make pauses between animations:
function run(){
var timeout = 0, delay = 4000;
$("#slide li").each(function(){
var $li = $(this);
setTimeout(function(){
$li.animate({ left: 700 }, delay);
}, timeout);
timeout += delay;
});
}
Example
Also I would recommend to use CSS-animations whenever it's possible:
Example with CSS-animations

Typewriter append with fadeIn

Hello I'm trying to make typewriter with fadeIn effect but my method doesn't work. Could you tell me how can I add fadeIn effect to this script?
<div class="inner container">
<h2>Typewriter test</h2>
</div>
var title = $('.inner h2').html();
$('.inner h2').html('');
var arrayTitle = title.split('');
var i = 0;
var interval = setInterval(function () {
if (i > arrayTitle.length) {
$('.inner h2').html(title);
clearInterval(interval);
} else {
//$('arrayTitle[i]').hide().appendTo('.inner h2').fadeIn();
$('.inner h2').append(arrayTitle[i]).fadeIn(50);
i++;
}
}, 50);

You can't fadeIn individual characters like that - your fadeIn() call is applied to the whole header, which is already visible. If you add each character as a <span>, you can fade that in:
var header = $('.inner h2');
var title = header.text();
header.text('');
var arrayTitle = title.split('');
var i = 0;
var interval = setInterval(function(){
if (i > arrayTitle.length)
{
header.text(title); // wipe out the <span> tags
clearInterval(interval);
}
else
{
$('<span>')
.text(arrayTitle[i])
.appendTo(header)
.hide()
.fadeIn(50);
i++;
}
}, 50);
Example, with longer intervals to show the fade-in more clearly: http://codepen.io/paulroub/pen/ixBdm

jQuery pause function on hover?

I have a jQuery/JS function that is using setInterval to loop through some image slides I have. It just flips through every 5 seconds...
Now I want it to pause if my mouse is hovered over it. How do I go about doing that on the setInterval function?
var current = 1;
function autoAdvance() {
if (current == -1) return false;
jQuery('#slide_menu ul li a').eq(current % jQuery('#slide_menu ul li a').length).trigger('click', [true]);
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = jQuery(".interval").val();
if (changeEvery <= 0) {
changeEvery = 10;
}
var itvl = setInterval(function () {
autoAdvance()
}, changeEvery * 1000);

Something like this would work assuming interval is defined in an outer scope:
$('.slideshow img').hover(function() {
interval = clearInterval(interval);
}, function() {
interval = setInterval(flip, 5000);
});

(function () {
var imgs = $('#your_div img'), index = 0, interval,
interval_function = function () {
imgs.eq(index).hide();
index = (index + 1) % imgs.length;
imgs.eq(index).show();
};
imgs.eq(0).show();
interval = setInterval(interval_function, 5000);
$('#your_div').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 5000);
});
}());
Example: http://jsfiddle.net/Zq7KB/3/
I reused some old code I wrote for a question the other day, but I figured it didn't matter that much. The trick is to store your interval in a variable that you keep in the background. Then, when you hover over the container, clear the interval. When you hover out of the container, re-set the interval. To get a better feel of how this works, change those 5000s to 1000s so it passes more quickly for testing.
Hope this helps.