We Keep Coding

On a scroll to activate animation event, how to make the animation NOT to play again when scrolling back up

In my website, I have a series of animated full width blocks that will be activated on a scrolling event, the problem is that the animation will play again if the user decides to scroll up to the previous block, how can I make each block to stay once the animation is played during the first time scrolling down event? Thanks!
Here is the Fiddle, any help will be much appreciated!
var $animation_elements = $('.animatedelements');
var $window = $(window);
var cont = 0;
const MULTIPLIER = 300; //millis
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height + 15);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
if($element.is($('div').parent()) && !$element.hasClass('fadeInUp')) {
cont++;
var delay = MULTIPLIER * cont;
$element.addClass('fadeInUp');
//Pause animation.
$element.addClass('paused');
setTimeout(function() {
//Start animation
$element.removeClass('paused');
cont--;
}, delay);
}else {
$element.addClass('fadeInUp');
}
} else {
$element.removeClass('fadeInUp');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

jQuery slider doesn't stop on mouseover

My jQuery slider is working but I don't know why it doesn't stop when I hover it.
I'm not using any slider plugin for this.
Here is the code.
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider= $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
function startSlider(){
setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if(currentSlide === $slides.length){
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider(){
clearInterval(interval);
}
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
stopSlider();
});
Any help would be appreciated.

Try this ;)
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var interval;
var $slider = "";
var $slideContainer = "";
var $slides = "";
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({
'margin-left': '-=' + width
},
animationSpeed, function(){
currentSlide++;
if(currentSlide === $slides.length){
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider(){
clearInterval(interval);
}
$(function(){
$slider = $('#slider');
$slideContainer = $slider.find('.slides');
$slides = $slideContainer.find('.slide');
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});

Man you do it wrong.
To stop an interval you need to assign it to a variable before.
Create your interval and assign it to var:
var timer = setInterval(function (){
// do stuff here
});
You have your time setted up, now you can stop it! Like this:
clearInterval(timer);
Hope to help you :)

if you want to Stop the interval you need to do it like:
var interval = setInterval(function(){//do stuff here});
clearInterval(interval);

Just remove $ from your variable prefix, it is not php, it is jquery.

The slider won't repeat

I want that this slide still plays and don't stop. Like an automatic loop. So what is the best code to do that? If you want to edit it, here's theJsFiddle
Here's the JS code:
var s = 0,
t = 2000;
$(document).on('ready', slide);
function slide() {
var speed = setTimeout(slider, t, );
}
function slider() {
s++;
var sld = $('#slider li'),
imgs = sld.length;
if (s == imgs) {
s = 0;
}
sld.eq(s - 1).animate({
'left': '0px'
}, t, function() {
sld.eq(s).animate({
'left': '0px'
}, t, function() {
speed = setTimeout(slider, t);
});
});
}

Change your JavaScript to this:
var s = 1, t = 3000;
$(document).on('ready', slider);
function slider(){
var sld = $('#slider li'),
imgs = sld.length;
if(s == imgs){
$('#slider li').css('left', '');
s = 1;
}
sld.eq(s).animate({'left': '0px'}, t, function(){
setTimeout(slider, 1000);
});
s++;
}
And a JSFiddle for you.

"read more" when clicking on both button and body text

I'm trying to do like http://css-tricks.com/text-fade-read-more/ -- but how do I get it to contact/expand both when clicking on the More button and on the body text?
Clicking on the body text works fine, but it only works the first time with the More button:
http://jsfiddle.net/frank_o/8ssrmxwp/10/
JS:
$.fn.truncate = function(container, maxHeight) {
var totalHeight = 0,
paragraph = container.find('p');
container.css('max-height', maxHeight);
paragraph.each(function() {
totalHeight += $(this).outerHeight(true);
});
if(totalHeight > maxHeight) {
container.append('<div class="fade_overlay"></div>');
$('More').insertAfter(container);
var fadeOverlay = container.parent().find('.fade_overlay'),
more = container.parent().find('.more'),
duration = 100;
// http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
function firstClick() {
container.css('height', container.height())
.css('max-height', 9999);
container.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
container.one('click', secondClick);
}
function secondClick() {
container.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
container.one('click', firstClick);
}
container.one('click', firstClick);
more.one('click', firstClick);
}
}
$('.article').each(function () {
$.fn.truncate($(this), 220);
});
I've tried to lay out the functions differently but to no avail:
http://jsfiddle.net/frank_o/8ssrmxwp/12/
JS:
var oddClick = function(target) {
target.one('click', function() {
var target = $(this);
target.css('height', container.height())
.css('max-height', 9999);
target.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
target.one('click', evenClick);
});
}
var evenClick = function(target) {
target.one('click', function() {
var target = $(this);
target.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
target.one('click', oddClick);
});
}
oddClick(container);
oddClick(more);

Through more.one('click', firstClick); the event handler gets removed after the first call. Change it to more.on('click', firstClick); and it works.

If statement in setInterval only working once

I'm new to Stack Overflow, so excuse me if I'm completely doing something I shouldn't be doing, and let me know so I can learn.
Anyway! The code:
$(document).ready(function() {
var imgWidth = $(".window").width();
var imgSize = $(".image_reel img").size();
var imgReelWidth = imgWidth * imgSize;
$(".image_reel").css({
width: imgReelWidth});
var num = 960;
var numImgs = $('div.image_reel img').length;
var currentSlide = 0;
setInterval(function() {
currentSlide++;
if (currentSlide != numImgs) {
$(".image_reel").animate({
left: -num
}, 1000);
}
else {
var setWidth = numImgs - 1;
var newSlideNum = num * setWidth;
$(".image_reel").animate({
left: newSlideNum
}, 1000);
currentSlide = 0;
}
}, 2000);
});
What this code is supposed to be doing (or at least I thought it was...) is that after 2 seconds, it will loop through the if statement and check if the "current slide" is equal to the amount of images there are. Now I checked with the alert function to see if all the numbers are correct and they are, but for some reason, the slider is only working once, and that's it. Any ideas why?
Thanks in advance guys.

This might be your problem:
var numImgs = $('div.image_reel img').length;
This holds the number of images at the moment it's called, not every time you call it. Replace numImgs with $('div.image_reel img').length in your code, and see if it works:
$(document).ready(function() {
var imgWidth = $(".window").width();
var imgSize = $(".image_reel img").size();
$(".image_reel").css('width', imgWidth * imgSize);
var num = 960;
var currentSlide = 0;
var setWidth = 0;
var newSlideNum = 0;
setInterval(function() {
currentSlide++;
if (currentSlide < $('div.image_reel img').length) {
$(".image_reel").animate({left: -num}, 1000);
} else {
setWidth = numImgs - 1;
newSlideNum = num * setWidth;
$(".image_reel").animate({left: newSlideNum}, 1000);
currentSlide = 0;
}
}, 2000);
});