Develop Reference

override fadeout() display: none

Have a fiddle here:
http://jsfiddle.net/BP6rq/1514/
Fades my element out and puts it in a fixed position once it has reached the necessary point. I am using fadeOut() for the back-in effect. The problem is I do not want it to hide. I know about fadeTo, however I haven't been able to achieve that same effect. I've also tried overriding the display: none, but that eliminates the functionality of the fade effect. What can I do to maintain the fade effect, but not have fadeOut() disappear when scrolled back up and back to its original position?
Thoughts?

Use animate() together with css opacity instead of fadeIn fadeOut:
jsFiddle Demo
$(window).bind("scroll", function () {
$.fx.speeds.xslow = 250;
if ($(this).scrollTop() > 50) {
$('#bottomcta')
.animate({
'opacity': 1
},1000)
.addClass('fixed');
} else {
$('#bottomcta')
.animate({
'opacity': 0
},1000)
.removeClass('fixed');
}
});

Two problems with jquery script: z-index and setTimeout

have a side menu on the left side of the website. I want the submenu to slide open to the right with a neat animation. I have made the script:
jQuery(document).ready(function($){
$(".main-navigation ul li").mouseenter(function() {
if ($(this).children().length > 0) {
$(this).children("ul").css ({
"display" : "block",
}).animate({
left: '250px',
opacity: 1,
}, 500)
}})
.mouseleave(function() {
setTimeout(function() {
$(this).children("ul").css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000);
});
});
Sliding works just fine. The menu shows up nicely.
There's two problems though. One is, that the menu z-index doesn't work. The submenu's ul has a negative index set in css but when it slides it goes OVER the main ul. I want it to go UNDER the menu so it doesn't show.
Second one is, the SetTimeout function doesn't seem to work. Once the mouse leaves the area the ul just stays there forever. Without the Settimeout function it disappears just nicely (instantly though, I want it to stay there awhile).
I have made a jsfiddle example
http://jsfiddle.net/r8vx07ae/4/

Problem with z-index:
An element can not appear behind its parent. Since the submenu exists as a child element of the menu, it will not be able to appear behind the menu, z-index is really only applicable to two elements which share the same parent.
Problem with setTimeout:
The issue is most likely being caused because the this variable is out of scope by the time that the timeout occurs. This has an easy fix: create a global variable (say subMenu) and set subMenu = this before the timeout occurs and replace this with subMenu in your timeout function. You may use additional variables or a dictionary/array if you have multiple submenus to prevent the variable from being overwritten if two submenus get opened one right after the other

It is because $(this) is losing its scope on setTimeout function. To overcome this issue, you can assign your $(this) scope into a variable like $this and then use it in your setTimeout function. Here is the code changes:
.mouseleave(function() {
var $this=$(this);
setTimeout(function() {
$this.children("ul").css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000);
});
And here is your updated fiddle:
http://jsfiddle.net/r8vx07ae/5/

The problem with the setTimeout is the scope of this
When it runs, it is the window, not the menu.
jQuery(document).ready(function($){
$(".main-navigation ul li").mouseenter(function() {
/* see if the timer has run yet, if it has not, cancel it */
var hideTimer = $(this).data("timer");
if (hideTimer) window.clearTimeout(hideTimer);
if ($(this).children().length > 0) {
$(this).children("ul").css ({
"display" : "block",
}).stop().animate({
left: '250px',
opacity: 1,
}, 500)
}})
.mouseleave(function() {
/* store the children here to get rid of the "this" scope issue */
var ul = $(this).children("ul");
/* Store a reference to the timer so we can cancel it if they mouseover again */
$(this).data("timer", setTimeout(function() {
ul.css({
"display" : "none",
"left" : "0px",
"opacity": 0,
})
}, 1000));
});
});
This will not fix the z-index issue.

I guess this is from the usage of "this" inside the callback of setTimeout sadly i do not have any computer to test out...
See section "the this problem": https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout#The_%27this%27_problem
To solve it, save a reference of this before the call of setTimeout, and use the saved reference inside your callback

Make .delay() and .animate() function re-run everytime a classes div opens

So, I'm sure there is a simple answer to this, but after 2 days of research I cannot find a solution.
The Story:
I have a dynamic page. When you get to one section and click on one of the 6 options it pulls up some info (name, place, etc.). I have a jQuery function that makes that info hide about half way after a few seconds. When you hover over that section with the mouse it also will animate up and back down as the mouse leaves it.
The Problem:
How do I make the whole function run again if another of those 6 option is clicked? Each time an option is selected the class with that info comes up, but after this function runs once (the delay part and animate down part) it just stays minimized unless you hover over it. I want it to appear every time and then run through the function. I have tried a number of things, and I'm sure there is a simple solution, just not sure what it is.
Here is a link to my codepen with a sample: http://codepen.io/jsegarra/pen/GxByr
I have also tried to wrap that all in a click function, for clicking on one of those 6 options and thought that would do the trick, but still the same thing:
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').delay(5000).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});

Just reset the div css before re-running the function
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').css('height', '100px').delay(500).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Here is the html I used with that javascript
<div class="title">title</div>
<div class="bottomTab">This is going to move from just being about 50 pixels high to about 100 pixels high after i add in some mouseenter and mouse out events</div>
I used the same CSS of your code pen, and the result was a full reclickable option

I don't see the problem. Your code seems to works fine. You've just typed an error while transfering to CodePen. Replace $('this').hover( with $('.bottomTab').hover(.

"fadeTo" function ignores the time

I have a div and I animate it's position with two divs(which are named as open and close).
I want "open" div to be fade out and invisible when opening animation completes. And become visible with fading in when closing animation completes.
But there is problem with the fading in. Time parameter is ignored and it appears when click action happens.
Here are my codes and a fiddle to see clearly what is going on with the codes;
$('.open').on('click', function(){
$('.menu').animate({"marginLeft":"-30px"},1000);
$('.open').fadeTo(1000, 0);
setTimeout(function () {
$('.open').css({"display":"none"})}, 1000);
});
$('.close').on('click', function(){
$('.menu').animate({"marginLeft":"82%"},1000);
$('.open').fadeTo(1000, 100);
});
the fiddle is http://jsfiddle.net/ctarimli/B9h2w/
as I know; the first paremeter is for time and the second one is the opacity in "fadeTo".
Tell me If I am wrong or what is the solution for this?

Opacity runs from 0 to 1, not 0 to 100. Use:
$('.close').on('click', function () {
$('.menu').animate({
"marginLeft": "82%"
}, 1000);
$('.open').fadeTo(1000, 1);
});
jsFiddle example
From the docs on .fadeTo():
opacity Type: Number A number between 0 and 1 denoting the target
opacity.

Simple but tricky Show/Hide Toggle On/Off Combinations driving me bonkers

Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);

I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()