Develop Reference

Menu animation slide from top function

I would like to add a menu like the one in this demo site Here
it drops down from the top of the page as you can see and i would like to know if this was done with only CSS3 or .
If someone can show me a simple function so i can go off it that would be nice!
EDIT: ok i found the code snippet for it I think , i still want to know if this is a good way to do it , and if someone can make this more simple, seems like a lot of code just for that
var isUp = false;
var navHeight = $('#navContainer').height();
var hideHeight = navHeight - 50;
$('#arrowLink a').click(function(e){
e.preventDefault();
navHeight = $('#navContainer').height();
hideHeight = navHeight - 50;
$('.tooltip').remove();
if(!isUp){
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_bottom.png');
$(this).find('img').attr('title',showNav);
$( "#navContainer" ).animate({
top: '-='+ hideHeight + 'px'
}, 500, "swing", function() {
isUp = true;
});
}else{
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_top.png');
$(this).find('img').attr('title',hideNav);
$( "#navContainer" ).animate({
top: "0"
}, 500, "swing", function() {
isUp = false;
});
if($('body').hasClass('body_show_content'))
{
$('#mainContainer').fadeIn();
}
}
});`

Yes, it can be done. You can use css transition/keyframes and a click event.
Code
html
<div id="container hidden">Something</div>
css
#container {
postion:fixed;
-webkit-transition: all 2s;
transition: all 2s;
}
.hidden {
top: -25px;
}
js
$('#container').click(function(){
$(this).toggleClass('hidden');
});
Explanation
Your menu is fixed at the top of the page. Whenever you toggle the button that displays/hides it, you can add a css class that changes the position of the element. Because you have transition on the element, it will animate to that new location. This can also be done using keyframes instead of transition to have more control.
css transition
css keyframes

If you want to achieve this using pure css, you need to make use of transition effect. Check out the fiddle which gives a fair idea of something similar.
FIDDLE

Page jumps abit up when an element above fades in

I have 2 elements, the first one (at the top) has the following CSS properties:
header {
position: relative;
height: 100%;
width: 100%;
background-color: black;
}
This makes it in the size of the browser's viewport, what I did on purpose because I wanted that result. I also had to give the html, body element the CSS property's for this to work (filling the screen with the first element):
html, body {
height: 100%;
width: 100%;
}
The second element I have looks like this:
#content {
display: none;
position: relative;
height: 1500px;
width: 100%;
background-color: yellow;
}
This element is underneath the first one.
As you can see, this element is hidden. That's because when I click on the button on the first element (which you can see in the jsFiddle) it shows the #content element, scrolls to that, and hides the element where we came from (header) when it's done scrolling.
Which works perfectly, I've got the function here:
var showScrollHide = function(showTime, element, eleTime, hide, hideTime, func) {
var _ele = $(element),
_hide = $(hide);
_ele.fadeIn(showTime, function() {
$('html, body').animate({
scrollTop: _ele.offset().top
}, eleTime, function() {
_hide.fadeOut(hideTime, func ? func : null);
});
});
};
I'm calling that function by this piece of code:
$('.exploreBtn').on('click', function() {
showScrollHide(500, content, 1000, header, 250, function() {
$(window).scrollTop(0);
$('.scrollBackBtn').fadeIn();
});
});
In the snippet above I had to call $(window).scrollTop(0); otherwise it would scroll down the page a bit when it was done scrolling. Also I displayed the scroll back button now, but that is the problem.
When I'm on the second element, and the element above it is hidden by the function above. And I try to use the same function to scroll it back up which means:
Show the element above
Scroll to it
Fade out the element we came from
It only gives me a fade to the element I'm trying to scroll to.
When I removed all the code from the function, and only used this:
$('header').fadeIn();
It just did the same and automatically faded the screen to that element we have just faded in. Which means it scrolls up, but not with any animation or what so ever.
Here is a jsFiddle to show what I'm doing
Btw, I already fixed this issue with the help of #Loktar with this piece of code, but I'm still not sure if its the right way to do it:
$('.scrollBackBtn').on('click', function() {
$(window).scrollTop(0);
$(header).slideDown();
});

If I am understanding it correctly the following should work.
_scrollBackBtn.on('click', function() {
_window.scrollTop(0);
$(header).slideDown();
});
Live Demo

How to return an animation to it's original state if the button is clicked again?

Now it may be a little bit of a dumb question (probably is), but i just can't wrap my head around it. So i have a navigation bar that is horizontally and vertically centered with a button inside of it. If you click the button the nav bar animates to the top of the page with a little bit of margin left. What i'm trying to achieve is when the button is clicked again the nav bar would animate back to it's original position. I've tried many lines of code and i still can't get it right (shouldn't even be that hard). Any help is appreciated.
JavaScript:
$("#btn").click( function(event){
$("#wrapper").animate({
'top': 100
}, 400)
});
CSS:
#wrapper {
position:absolute;
top:50%;
margin-top:-100px;
left:0;
width:100%;
}
#nav {
margin:20px auto;
height:200px;
width:900px;
text-align:center;
background-color:#bca;
border:1px solid green;
}
JSFiddle here.

You could use something like that:
DEMO jsFiddle
$("#btn").click( function(event){
this.toggle = !this.toggle;
$("#wrapper").stop().animate({
'top': this.toggle?100:"50%"
}, 400)
});

You can introduce a clicked variable which can tell you if it has been clicked or not (or similar) then on 1st click, move up, on second click, move down and so on.
JSFIDDLE LINK
var clicked = false;
$("#btn").click( function(event){
clicked = !clicked;
if(clicked)
{
$("#wrapper").animate({
'top': '-=100'
}, 400)
}
else
{
$("#wrapper").animate({
'top': '+=100'
}, 400)
}
});

You can achieve this using jquery UI switchClass plugin. or in a ugly way by updating your code like:
$("#btn").click( function(event) {
var top = $("#wrapper").css('top') == '100px' ? '50%' : 100;
$("#wrapper").animate({
'top': top
}, 400)
});

JQuery Menu Only Working on Homepage

Alright, this is a pretty simple.. maybe even stupid question. But I have been trying for a pretty long time to get this working properly and nothing has worked. I have a Menu that toggles with a plus / minus sign... this menu only works on the homepage though and nothing else. Here is the code:
$(document).ready(function(){
$('.gh-gallink').toggle(
function() {
$('.gallery_container').animate({
marginTop: "x",
}, 1000);
$('.jquerycssmenu ul li ul').animate({
marginTop: "x",
}, 100);
$('.jquerycssmenu ul li ul li a').animate({
height: "x",
}, 100);
$('#main').animate({
marginTop: "x",
}, 1000);
$(this).text('+');
}, function() {
$('.gallery_container').animate({
marginTop: "x",
}, 1000);
$('.jquerycssmenu ul li ul').animate({
marginTop: "x",
}, 100);
$('.jquerycssmenu ul li ul li a').animate({
height: "x",
}, 100);
$('#main').animate({
marginTop: "x",
}, 1000);
$(this).text('-');
});
});
The menu works fine, but again.. only on the mainpage. And of course I don't have the x's in my actual code. But anways, the code is in the header.php file of my site and again, it only works on the homepage of my site. I tried changing the "$(document)" to "jQuery(Document)" and I also deactivated all my plugins too, but the menu still only works on the home page.
And also, here is the html that displays the toggle button:
<div class="gallerylink">
<a href="#" class="gh-gallink">
-
</a>
</div>
Any help would be appreciated! :)
Edit:
I did what Chipmunk said and one by one got rid of each script in my header. I found out that when I removed this script (listed below) that scrolls up the page to an achor, everything works fine. However, I would still like to have both scripts running at the same time. Here is the anchor scrolling script.
// When the Document Object Model is ready
jQuery(document).ready(function(){
// 'catTopPosition' is the amount of pixels #invisiblebox
// is from the top of the document
var catTopPosition = jQuery('#invisiblebox').offset().top;
// When #scroll is clicked
jQuery('#scroll, #scrolls').click(function(){
// Scroll down to 'catTopPosition'
jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
// Stop the link from acting like a normal anchor link
return false;
});
});
So when you click on #scrolls, or #scroll.. it scrolls back up to the anchr "#invisiblebox". I don't know why this doesn't work with my toggle menu. If anyone has a solution to get both scripts running, please let me know.

Please read
http://www.ideazone.ca/2011/03/jquery-wordpress-how-to-avoid-common-conflicts/ and
JQuery conflict with an other JQuery library

jQuery slideUp to show the element and not hide

jQuery's slideUp effect hides the element by sliding it up, while slideDown shows the element. I want to show my div using slideUp. can anyone guide me ? thanks

$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
http://docs.jquery.com/UI/Effects/Slide

It's a little more complex than just saying slideUpShow() or something, but you can still do it. This is a pretty simple example, so you might find some edge-cases that need adressing.
$("#show-animate-up").on("click", function () {
var div = $("div:not(:visible)");
var height = div.css({
display: "block"
}).height();
div.css({
overflow: "hidden",
marginTop: height,
height: 0
}).animate({
marginTop: 0,
height: height
}, 500, function () {
$(this).css({
display: "",
overflow: "",
height: "",
marginTop: ""
});
});
});
Here's a fiddle showing the slideUp/slideDown methods, the same effects using animate, and a modified version using animate that goes in reverse: http://jsfiddle.net/sd7zsyhe/1/
Since animate is a built-in jQuery function, you don't need to include jQuery UI.

To get the opposite of slideUp and slideDown. Add these two functions to jQuery.
$.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }

I found a tricky way...
you can set div with css style bottom:0px,
add call
$("#div).slideDown();
will show with the slideUp-to-show effect you want.

Jquery toggle
This toggle effect is only for up and down. Jquery UI is for every other direction

For those who don´t use the Jquery UI but want to add the function to Jquery Library:
jQuery.fn.slideUpShow = function (time,callback) {
if (!time)
time = 200;
var o = $(this[0]) // It's your element
if (o.is(':hidden'))
{
var height = o.css({
display: "block"
}).height();
o.css({
overflow: "hidden",
marginTop: height,
height: 0
}).animate({
marginTop: 0,
height: height
}, time, function () {
$(this).css({
display: "",
overflow: "",
height: "",
marginTop: ""
});
if (callback)
callback();
});
}
return this; // This is needed so others can keep chaining off of this
};
jQuery.fn.slideDownHide = function (time,callback) {
if (!time)
time = 200;
var o = $(this[0]) // It's your element
if (o.is(':visible')) {
var height = o.height();
o.css({
overflow: "hidden",
marginTop: 0,
height: height
}).animate({
marginTop: height,
height: 0
}, time, function () {
$(this).css({
display: "none",
overflow: "",
height: "",
marginTop: ""
});
if (callback)
callback();
});
}
return this;
}
Credits: #redbmk answer

Despite the name, slideDown can actually slide your element both ways. Use absolute position if it is required to animate inside the parent element:
#slideup {
position:fixed;
bottom:0;
background:#0243c9;
color:#fafefa;
width:100%;
display:none;
padding: 20px;
}
#littleslideup {
position:absolute;
bottom:0;
background:#000;
color:#fff;
display:none;
padding:10px;
z-index:100;
}
#slidedown {
position:fixed;
top:0;
background:#c94333;
color:#fafefa;
width:100%;
display:none;
padding: 20px;
}
button {
display:inline-block;
font-size:16px;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative">This amounts to 70% of the total timber stand area of the region (not including the dwarf pine and shrubby alder) and is more than the total area of all other stone birch forests growing in the Magadan, Khabarovsk, Primorye and Sakhalin regions and other areas of its distribution.
<div id="littleslideup">Absolute-positioned element</div>
</div>
<span style="color:red">Click >> </span>
<button onclick="jQuery('#slideup').slideDown(1500);" >"Slideup"</button>
<button onclick="jQuery('#slidedown').slideDown(1500);" >"Slidedown"</button>
<button onclick="jQuery('#littleslideup').slideDown(1500);">"Slideup" inside element</button>
<div>Finally, closing the subject of volcanic activity, it must be said that the stone birch stands by its functional reaction quite adequately in order to re ect the character and intensity of the physical, chemical and thermic processes, stipulated by volcanism as well as the in uence upon biota and ecosystems.</div>
<div id="slideup">Could be a bottom cookie warning bar</div>
<div id="slidedown">Could be a top cookie warning bar</div>

I've got some downvotes so I checked my answer and indeed I didn't answered correctly the OP question, sorry. So I'm gonna try to fix that.
First, the slideUp() method in JQuery is intended to hide the element rather than reveal it. It is basically the opposite of slideDown() which shows your element by sliding it down.
By knowing that I think we agree that there is no magic function right there to do a slide up effect to show an element (in JQuery).
So we need to do a little bit of work to get what we need: slid up reveal effect. I found out some solutions and here is one I think simple to implement:
https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal
The solution above works with the hover event, for the click event try this modified code:
http://jsfiddle.net/D7uT9/250/
The answer given by #redbmk is also a working solution.
Sorry for my misunderstanding the first time.
OLD ANSWER
It's an old post, but if someone is looking for a solution here is my recommandation.
We can, now, use slideToggle() to achieve this effect (without the need of jQuery UI).
$(".btn").click(function () {
$("div").slideToggle();
});
Documentation: http://api.jquery.com/slidetoggle/

Having encountered this with a student looking to "slide up always hide" an error container, I advised he simply use CSS transitions:
.slide-up {
transition: 1s ease-out;
transform: scale(1);
}
.slide-up[aria-hidden="true"] {
transform: scale(0);
height: 0;
}
jQuery(document).ready(function($) {
const $submitButton = $(".btn");
const $someDivs = $("div");
const $animatedSlidingTargets = $(".slide-up");
$someDivs.on("click", function() {
$animatedSlidingTargets.attr("aria-hidden", true);
});
});

For #Jason's answer, whether slide-up to show and slide-down to hide, you still need to use the { direction: "down" } option in jQuery:
$(".btnAbout").on("click", function () {
// Slide-up to show
$("#divFooter").show("slide", { direction: "down" }, 1000);
});
$("#btnCloseFooter").on("click", function () {
// Slide-down to hide
$("#divFooter").hide("slide", { direction: "down" }, 1000);
});
But this requires jquery-ui, or else you'll hit the TypeError: something.easing[this.easing] is not a function error:
<script defer src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>