We Keep Coding

Native javascript scroll top to bottom loop

I'd like to create two functions without using jQuery to scroll from top to bottom and bottom to top with a timeout.
My code using jQuery (it works) :
function scrollToTop() {
setTimeout(function() {
$('html, body').animate({ scrollTop: 0 }, {
duration: 10000,
complete: function() {
scrollToBottom();
}
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
$('html, body').animate({ scrollTop: $(document).height() }, {
duration: 10000,
complete: function() {
scrollToTop();
}
});
}, 10000);
}
scrollToBottom();

You can use this:
// top
setTimeout(() => window.scrollTo(0,0), 1000);
// bottom
setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 1000);

You could use the scroll method, it's a native method and also has a option for different behavior.
function scrollToTop() {
setTimeout(function() {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
}, 10000);
}

How to slide a menu away at a certain time?

https://jsfiddle.net/rabelais/6rdzb1x9/
Please see the fiddle above.
When user clicks on the work link the first menu slides out.
When the user clicks on the Igna link a second menu slides out.
When the user clicks on the menu link again both menus slide away.
Question: How do I re-code this so that the first menu slides away only when the second menu has finished sliding back away?
$('#menu').click(function () {
if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({ left: 'toggle' }, 300);
window.setTimeout(function () {
$('#igna, #black').slideToggle("slow");
}, 100);
}
else {
$('#black, #igna, #igna-1').slideUp("fast");
window.setTimeout(function () {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
$('#igna').click(function () {
if ($('#igna-2').css('display') == 'none') {
$('#igna-2').animate({ left: 'show' }, 300);
window.setTimeout(function () {
$('#igna-1').slideToggle("slow");
}, 300);
}
else {
$('#igna-1').slideToggle("fast");
window.setTimeout(function () {
$('#igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});

As I mentioned in my comment you can use the callback function within slideToggle() and animate(). This will trigger an event after the animation has been completed. I only modified the $('#menu') click event for this and left the rest the same.
Fiddle
$('#menu').click(function() {
if ($('#igna-1').css('display') != 'none') {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({
left: 'hide'
}, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
});
});
} else if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({
left: 'toggle'
}, 300, function() {
$('#igna, #black').slideToggle("slow");
});
} else {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
}
});

Javascript/jQuery, Display div after animation finishes

here is a working jsfiddle:
http://jsfiddle.net/YnT2X/
I don't want the div to display until AFTER the return animation completes.
jQuery:
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250)
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
$('#arrow').show();
});
});

Try this:
Fiddle: http://jsfiddle.net/upycZ/
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250,function(){
$('#arrow').show(); //<- Shows arrow after run
});
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
});
});

why isn't this working? jquery

It's supposed to toggle between the functions when '#drop a' is clicked. What's the deal?
$(document).ready(function() {
$('#drop a').toggle(function() {
$('body').animate({'margin-top': '300px'}, 600);
setTimeout(function() {
$('#drop a').css('background-position', '-40px 0px');
}, 1000);
}, function() {
$('body').animate('margin-top': '80px'}, 600);
});
});

Seems that you forgot the starting bracket:
// ---------------v
$('body').animate({'margin-top': '80px'}, 600);
which should definitely cause the fatal error.

Why do I get a jQuery syntax error with .post and hide("slide")?

After I do the .post thing, I want to hide the first div with a left slide, then show the second with a right slide. My right-slide was working fine and then I went and tried to put in the left slide and I broke it all.
if(hasError == false) {
$.post("/process-email-signups",{email_address: email_addressVal},
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
function() {
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
});
}
);
}

You've got an extraneous function block in there. Try this instead:
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
}
);

I'm not sure what the extra function() is doing, maybe try removing that?
if(hasError == false) {
$.post("/process-email-signups",{email_address: email_addressVal},
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
}
);
}

if(hasError == false) {
$.post("/process-email-signups", {email_address: email_addressVal},
function(data){
$("#email_signup_form").hide("slide", { direction: "left" }, 1000);
$("#thank_you_message").show("slide", { direction: "right" }, 1000);
}
);
}