We Keep Coding

how should i change my jquery script to animate mobile menu when first clicked?

i have the following mobile menu code i have been using for a while. it works fine. i have an animation via css added so when the menu button is clicked it adds an animation for a smooth scroll - however i am noticing it does not work on the very fist click - all clicks after the first does work. also if you see something gross in my jquery code do let me know, i am new to jquery and trying to learn by doing.
any help, or insight into something i am over looking, trying to resolve this would be greatly appreciated.
jQuery(function() {
//show the menu when button is clicked
jQuery('#menu_btn').click(function() {
if(jQuery('#menu').is(':visible')) {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
jQuery('#menu_close').css('display', 'none');
});
} else {
jQuery("#menu").css('display', 'block');
jQuery('#menu').animate({ left: '0' }, 'slow', function(){
jQuery('#menu_close').css('display', 'block');
});
}
});
//close menu when X button is clicked
jQuery('#menu_close').click(function() {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
});
});
callOnResize();
});
jQuery(window).resize( function(){
callOnResize();
});
function callOnResize() {
var winwidth = jQuery(window).width();
if (winwidth < 760) {
jQuery( '#menu' ).css({ display: 'none' });
jQuery('#menu').animate({ left: '0' }, 'slow');
} else if (winwidth >= 760) {
jQuery( '#menu' ).css({ display: 'block' });
}
}
the html of the menu is a very simple ul li view being output by wordpress
<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.
Your menu div "#menu" should not be displayed by default "display:none".
The script should be something like this:
jQuery('#menu_btn').click(function() {
if(jQuery('#menu').is(':hidden')) {
jQuery("#menu").css('display', 'block');
jQuery('#menu').animate({ left: '0' }, 'slow', function(){
jQuery('#menu_close').css('display', 'block');
});
});
} else {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
jQuery('#menu_close').css('display', 'none');
}
});

Sub menu needs to fold away first and then the first menu following using jQuery

please see this fiddle http://jsfiddle.net/rabelais/t6qc4Lrd/1/
var $menu = $('#menu');
$menu .click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
});
});
} else if ( $('#fatal').css('display') == 'none' ) {
$('#fatal').animate({ left: 'toggle' }, 300, function() {
$('#igna, #black, #dazed, #sons, #mad, #stimp').slideToggle("fast");
});
} else {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
}
if ($('#bio-line-1').css('display') != 'none') {
$('#bio-line-2').slideUp("slow");
window.setTimeout(function () {
$('#bio-line-1').animate({ width: 'hide' });
}, 300);
}
else if ( $('#mad-1').css('display') != 'none' ) {
$('#mad-1, #mad-2, #mad-3').slideToggle("fast", function() {
$('#mad-4').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
});
});
}
1.Clicking on the WORK link opens further links.
2.Clicking on MAD LONDON opens a sub menu.
3.With both these menus open when you click on WORK again, both menus close at the same time.
My Question: Instead of them closing together I need the sub menu to fold away first and then the first menu. This affect does happen when one selects any link from the sub menu.
Please help. Thanks.

It's closed by the last else of your first if group, simply removing that last else will solve the problem (and in the example doesn't cause any other). See the working fiddle: http://jsfiddle.net/ktn425c6/

jQuery toggle with multiple animations

I have a site and when someone clicks the contact link, in the nav, a contact box appears and slides down. The nav then moves down to remain below the contact box (that just appeared). The issue is when you click the contact link again the toggle hides the contact box but leaves the nav down where it would be if the contact box was still visible. Here is the code:
contactBarBtn.click(function (e) {
search_close();
contactBar.toggle();
navbarFixedTop.animate({ top: contactBar.height() }, 'slow'),
contactBar.animate({ top: '0' }, 'slow'),
contactCorner.css('display', 'block'),
e.preventDefault();
return false;
});
Any ideas?

I found the solution.
contactBarBtn.click(function (e) {
if (jQuery('.contact-bar-corner').css('display') == 'block') {
search_close();
navbarFixedTop.animate({ top: '0' }, 'slow');
contactBar.animate({ top: -contactBar.height() }, 'slow');
stickyHeader.removeClass('sticky');
contactCorner.css('display', 'none');
e.preventDefault();
return false;
}
else if (jQuery('.contact-bar-corner').css('display') == 'none') {
search_close();
contactBar.show();
navbarFixedTop.animate({ top: contactBar.height() }, 'slow');
contactBar.animate({ top: '0' }, 'slow');
stickyHeader.addClass('sticky');
contactCorner.css('display', 'block');
e.preventDefault();
return false;
}
});

The problem is top: contactBar.height() will run before contactBar.toggle() has finished -- in fact, it will run almost right away. So instead, you need to move that into the toggle to get called when the toggle animation is finished:
contactBar.toggle(function() {
navbarFixedTop.animate({ top: contactBar.height() }, 'slow');
});
Also, the lines should end with ; not , as the commenter mentions!

jQuery slide back when clicked anywhere on the page

$(".links").click(function(){
$('.slider').stop(true,false).animate({ right: "0" }, 800, 'easeOutQuint');
}, function() {
$(".slider").stop(true,false).animate({ right: "-200" }, 800, 'easeInQuint');
}, 1000);
I am building a little slider on my website. The slider position is right: -200. It slides to position right: 0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.
http://jsfiddle.net/aofg5v78/

Putting your code through the JavaScript beautifier (it's always good to do it to your code that you post to make it easier to understand) gives this:
$(function () {
$(".links")
.click(function () {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
},
function () {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}, 1000);
});
You're trying to pass two handlers to .click() and something that looks like a timeout or duration (1000). Try something like this:
$(function () {
var toggle;
$(".links")
.click(function () {
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
});
Update: To make it slide when you click anywhere on the page it's slightly more complicated:
$(function () {
var toggle;
$(document).click(function () {
if (toggle) {
toggle = !toggle;
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".links")
.click(function (e) {
e.stopPropagation();
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".slider")
.click(function (e) {
e.stopPropagation();
});
});
This part:
$(".slider")
.click(function (e) {
e.stopPropagation();
});
is there to not hide the slider when you click on the slider (and not somewhere else on the page, outside of the slider) but if that's not what you want then you can remove it.
(The code could be refactored to remove duplication and to avoid running the selectors multiple times but it serves the purpose of this example. Also, you can't have more than one such slider on a page right now because all will slide at the same time but I guess that's ok.)
See DEMO.
It would be simpler for older jQuery versions with the toggle method but unfortunately it was deprecated in version 1.8 and removed in version 1.9.
(By the way, the easing functions that you are using are not available in plain jQuery by default. They are available if you're using jQuery UI but if you're not then you have to add them before you can use them. Just something to keep in mind to avoid the unhelpful "undefined is not a function" exception.)

Heres a different take:
DEMO
css
.slider {
position: absolute;
top: 200px;
height: 200px;
width: 200px;
background: #000;
/* relevant */
transform: translateX(-200px);
transition: transform 400ms ease-in-out;
}
.slider.shown {
transform: translateX(0);
}
jquery js
$(document).ready(function(){
var $slider = $('.slider').addClass('shown');
$(document).on('click', '*:not(.slider)', function(e) {
//// as described in question in on load, out on click
// $slider.removeClass('shown');
// to slide in/out on click:
$slider.toggleClass('shown');
})
// seperate button, dedicated to fn
$('.toggleSlider').on('click', function() {
$slider.toggleClass('shown');
});
});
demo HTML
<body>
<div class='slider'>such div</div>
<button class='toggleSlider'>such div</button>
</body>

You can do it from two event attachment... and check closest() element have .spider or not and make toggle from animation() function, see below code
$(function() {
$(".slider").click(function() {
$('.slider').stop(true, false).animate({
right: "0"
}, 800, 'easeOutQuint');
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.slider').length) {
$(".slider").stop(true, false).animate({
right: "-370"
}, 800, 'easeInQuint');
}
});
});
.slider {
position: fixed;
right: -370px;
top: 120px;
z-index: 99997;
width: 400px;
height: 300px;
background: red;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider"></div>

Implementing windows 8 like tiles in a web page using jQuery

Alright, I have added two div's in my web page and added below jQuery, and every thing looks fine, when i move my mouse on to the tile it expands, but when the first div expands, the second div position changes. i want to freeze the second div and the expanded tile should be on top of the second div. please suggest.
$(document).ready(function () {
$("#div1").css("background", "Red");
$("#div2").css("background", "Blue");
$("#div1").mouseenter(function () {
$(this).animate({
height: "+=30px",
width: "+=30px"
}, 50);
});
$("#div1").mouseleave(function () {
$(this).animate({
height: "-=30px",
width: "-=30px"
}, 50);
});
$("#div2").mouseenter(function () {
$(this).animate({
height: "+=30px",
width: "+=30px"
}, 50);
});
$("#div2").mouseleave(function () {
$(this).animate({
height: "-=30px",
width: "-=30px"
}, 50);
});
});