We Keep Coding

call clearInterval on mouseleave

I'm trying to create an image slideshow with setInterval which starts playing when the mouse is over .project-img and pauses when the mouse leaves .project-img. The problem i'm having is calling clear interval on to pause the slideshow when the mouse leaves, I'm currently receiving the error:
Uncaught ReferenceError: cycle is not defined
Where am I going wrong?
var Image = {
init: function() {
Image.setupImages();
Image.bindEvents();
},
bindEvents: function() {
$('.project-img').hover(function() {
var hovered = $(this);
var thumbnailIndex = 0
var thumbnailArray = hovered.children()
console.log(thumbnailArray);
var cycle = setInterval(function(){
thumbnailIndex++
if (thumbnailIndex === thumbnailArray.length) {
thumbnailIndex = 0;
thumbnailArray.removeClass('active');
thumbnailArray.eq(0).addClass('active');
} else {
var $visible = thumbnailArray.eq(thumbnailIndex);
thumbnailArray.removeClass('active');
$visible.addClass('active');
}
}, 700);
}, function() {
clearInterval(cycle);
});
},
setupImages: function() {
var projectImage = $('.project-img');
projectImage.each(function(project) {
$(this).find('.project-thumbnail:eq(0)').addClass('active');
});
}
}
$(document).ready(function() {
Image.init();
});
.project-thumbnail {
visibility: hidden;
display: none;
}
.active {
visibility: visible;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
</div>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
</div>

This is a scope issue, you have defined cycle within a function, so it can't leave. Put var cycle above var Image and your problems will be solved! Alternatively if you wanted to keep it scoped inside the Image var, you can replace cycle with Image.cycle and that will also work.

The variable cycle is in a different scope. Instead of using hover use each, declaring the cycle variable in an outer scope of hover like so:
var Image = {
init: function() {
Image.setupImages();
Image.bindEvents();
},
bindEvents: function() {
$('.project-img').each(function() {
var hovered = $(this);
var cycle;
hovered.hover(function() {
var thumbnailIndex = 0;
var thumbnailArray = hovered.children();
cycle = setInterval(function() {
thumbnailIndex++
if (thumbnailIndex === thumbnailArray.length) {
thumbnailIndex = 0;
thumbnailArray.removeClass('active');
thumbnailArray.eq(0).addClass('active');
} else {
var $visible = thumbnailArray.eq(thumbnailIndex);
thumbnailArray.removeClass('active');
$visible.addClass('active');
}
}, 700);
}, function() {
clearInterval(cycle);
});
});
},
setupImages: function() {
var projectImage = $('.project-img');
projectImage.each(function(project) {
$(this).find('.project-thumbnail:eq(0)').addClass('active');
});
}
}
$(document).ready(function() {
Image.init();
});
.project-thumbnail {
visibility: hidden;
display: none;
}
.active {
visibility: visible;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
</div>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
</div>

jQuery animation with setInterval()

I am confused about the pauses and the seemingly erratic behaviour of the animations. The pauses are way longer than 2000ms and the animation jumps way farther then I want it to.
function myFunction() {
myVar = setInterval(slideit, 2000);
}
I want to run a sequence of animations every 2 seconds (or 6 seconds rather, but for testing I'll go with 2) but the result seems kind of weird.
What am I doing wrong?
I am aware that I do not need callbacks for animations but the whole thing went out of sync when the window was minimized then, so I hoped that using callbacks could prevent that.
var myVar;
var countit;
countit = 1;
function myFunction() {
myVar = setInterval(slideit, 2000);
}
function slideit() {
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(".imgcontainer").animate({ // Next Image
"top": -($(".imgcontainer").height() * countit)
}, 500, function() {
$(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
myFunction();
#banner {
background: url(img/rauch-klein.jpg);
overflow: hidden;
height: 350px;
background-size: cover;
}
#subbanner {
width: 800px;
margin: 0 auto;
}
#banner .imgcontainer {
position: relative;
text-align: left;
height: 350px;
}
#banner img {
height: 100%;
vertical-align: middle;
position: absolute;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="banner">
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 150mm</div>
<img src="img/units/absaugarm.png" style="vertical-align:middle;">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 200mm</div>
<img src="img/units/absaugarm-200mm.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugkran</div>
<img src="img/units/absaugkran.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugtisch</div>
<img src="img/units/absaugtisch.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P10</div>
<img src="img/units/Airtech_P10.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P30</div>
<img src="img/units/Airtech_P30.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">BlowTec</div>
<img src="img/units/BlowTec.png">
</div>
</div>

From the Jquery docs:
If multiple elements are animated, the callback is executed once per
matched element, not once for the animation as a whole
That means the complete function is called for each bannertext class element. If you don't want to fadeout only specific elements, the quickest solution is referring to this inside the callback function.
function slideit() {
var cnt = countit;
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(this).parent().animate({ // Next Image
"top": -($(".imgcontainer").height() * cnt)
}, 500, function() {
$(this).children(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
jsfiddle example.
(Another side effect was that countit was increased right away. In normal execution it would have been increased before the first complete callback was executed. That's why a temp variable cnt is used as well)

clearInterval to stop hover animation in jQuery

I have the below fiddle
When I hover over prev I want it to move as it is doing and when I stop hovering I want it to stop.
See the code below. The alert works when I stop hovering but the clearInterval does not?
What am I doing wrong here?
<div> <span id="prev">prev</span>
<div class="scroll-container">
<div class="img-container">
<img src="http://dummyimage.com/100x100/000000/fff">
<img src="http://dummyimage.com/100x100/f33636/fff">
<img src="http://dummyimage.com/100x100/0c5b9e/fff">
<img src="http://dummyimage.com/100x100/0c9e0c/fff">
</div>
</div>
</div>
var hoverInterval;
function goLeft() {
if (!$('.img-container').is(':animated')) {
var first = $('.img-container img:first-child');
var firstClone = first.clone();
$('.img-container').append(firstClone);
$('.img-container').animate({
"left": "-=110px"
}, "slow", function () {
first.remove();
$('.img-container').css("left", "0");
});
}
}
$('#prev').hover(
function () {
hoverInterval = setInterval(goLeft, 100);
},
function () {
alert(1);
clearInterval(goLeft);
}
);

Change it to
clearInterval(hoverInterval);

How do I stop clicking next too many times from breaking my image rotator?

Im new to jquery and have been trying to code a simple image rotator, it works well at the moment except for the fact that if you click the "next" of "prev" buttons too many times very quickly it will break the image rotator.
Here is the html:
<div id="viewport">
<div id="imageContainer">
<div class="image" style="background-color:red;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:green;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:yellow;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:brown;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:purple;">
<div class="title"><p>This is the title of the post</p></div>
</div>
</div>
</div>
<input type="button" name="prev" id="prev" value="prev" />
<input type="button" name="next" id="next" value="next" />
and jquery:
var ic = $('#imageContainer');
var numItems = $('.image').size();
var position = 0;
ic.css('left', '0px');
var inter;
var rotateTimeout;
function rotate(){
inter = setInterval(function(){
if (position == (numItems - 1)) {
console.log(position);
$('.image').first().insertAfter($('.image').last());
ic.css('left', '+=400px');
position--;
}
ic.animate({opacity: 0.2, left: "-=400px"}, 1500, function(){
ic.animate({opacity: 1.0}, 1000);
});
position += 1;
}, 6000);
}
rotate();
$('#prev').click(function () {
console.log(position);
if (position == 0) {
$('.image').last().insertBefore($('.image').first());
ic.css('left', '-=400px');
position++;
}
ic.animate({
left: "+=400px"
});
position -= 1;
clearInterval(inter);
clearTimeout(rotateTimeout);
rotateTimeout = setTimeout(rotate, 10000);
});
$('#next').click(function () {
if (position == (numItems - 1)) {
console.log(position);
$('.image').first().insertAfter($('.image').last());
ic.css('left', '-400px');
position--;
}
ic.animate({
left: "-=400px"
});
position += 1;
clearInterval(inter);
clearTimeout(rotateTimeout);
rotateTimeout = setTimeout(rotate, 10000);
});
Here is a demo of the rotator.
So how can I either stop the user from clicking the button too quickly, or perhaps only account for a click per two seconds to allow the rotator to do what it needs?

To limit function call frequency you can use some "Throttle" function. For example _.throttle from Underscore.js or any other implementation. It is not necessary to use whole library, only required function could be copied from there.
The event handler attachment will look like this:
$('#prev').click( _.throttle(function () { yours code... }, 2000) );

How to slide out and slide in two divs alternately in single line?

I'm trying to do function to sliding new added content, using jQuery slide effect but I can't apply any solutions to put two divs in a single line. How to fix code below to slide from left to the right side by side? Maybe this code is completely to rebuild?
jsFiddle:
jsfiddle
JS:
$(function() {
$("#hello").html("Hello");
$('#edit').toggle(function() {
var newhtml = '<input type="text" id="hello_input" value="" />';
slideNewContent(newhtml);
}, function() {
var newhtml = $("#hello_input").val();
slideNewContent(newhtml);
});
});
function slideNewContent(c) {
$("#slideOut").empty();
$("#slideIn").children().clone().appendTo("#slideOut");
$("#slideIn").find("#hello").html(c);
var slideOut = $("#slideOut");
var slideIn = $("#slideIn");
slideOutIn(slideOut, slideIn);
}
function slideOutIn(outElement, inElement) {
var hideoptions = { "direction": "right", "mode": "hide" };
var showoptions = { "direction": "left", "mode": "show" };
$(outElement).effect("slide", hideoptions, 1000);
$(inElement).effect("slide", showoptions, 1000);
}
​HTML:
<div class="span3">
<div id="slider">
<div id="slideIn" class="content">
<span>
<span id="hello"></span>
<button class="btn btn-mini" id="edit">Edit</button>
</span>
</div>
<div id="slideOut" class="content"></div>
</div>
</div>​
CSS:
#slider {
/*float:left;*/
display: inline-block;
}
#slideIn {
width: 270px;
/*display: inline;*/
}
#slideOut {
width: 270px;
/*display: inline;*/
}
#hello_input {
width:160px;
}

Edit to this
$(outElement).effect("slide", hideoptions, 0);
$(inElement).effect("slide", showoptions, 0);