Develop Reference

How to jQuery show element fast while hide with small duration

how can I in jQuery toggle element on faster than toggle this element off in miliseconds?
There is my code:
jQuery(document).ready(function() {
$('.enmenu').on('click', function(){
$('.ensettings').fadeToggle();
return false;
});
$('html, body').on('click',function(){
$('.ensettings').hide();
});
$(".ensettings").click(function(e){
e.stopPropagation();
});
});
/* Dropdown menu - End */```

You can use fadeToggle conditionally to set the speed of the toggle.
$('.enmenu').on('click', function() {
var el = $('.ensettings');
el.fadeToggle(el.is(":hidden") ? 200 : 5000);
});

Instead of using fadeToggle, simply use hide or show with the duration parameter set. To know if an element is hidden or not, use is(":hidden"):
$('.enmenu').on('click', function(){
var $elem = $('.ensettings');
if($elem.is(":hidden")) { // if element is hidden
$elem.show(200); // show with 200 miliseconds animation
} else { // otherwise
$elem.hide(5000); // hide with 5000 miliseconds animation
}
return false;
});

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L

Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

CSS overlay when the menu is accessed not working correctly

I have a website where there is implemented a CSS overlay when the menu is accessed. This overlay fades in and out over the rest of the page but not the menu itself via the z-index. All works well on mouseover, the overlay fades in, and the rest looks dimmed.
However when the mouse is not on the menu anymore, the fadeout of the overlay is messed up. The overlay itself fades out correctly, but all images show up immediately (opacity 1?) and that makes it look strange. I think the images have to be fade-in when the overlay fades-out. You can see an example on www.appartement-tekoop.nl of the behavior.
I think the problem is with the z-index of the images, but am not sure.
This is my javascript for the overlay:
<script type="text/javascript">
jQuery(function () {
var $menu_main_nav = jQuery('#menu-main-nav');
var $menu_main_nav_items = $menu_main_nav.children('li');
var $oe_overlay = jQuery('#oe_overlay');
var $pricetable_dropdown = jQuery(".price-header");
var $menutoggle = jQuery('.menutoggle');
var $mainmenu = jQuery('.main-nav');
$menu_main_nav_items.bind('mouseenter', function () {
var $this = jQuery(this);
$this.children.addClass('slided selected');
// updated code starts
if($this.children('.menu-item-has-children').hasClass('not-shown')){
$menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
$this.removeClass('slided');
}
else {
$this.children('.menu-item-has-children').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
$this.removeClass('slided');
});
}
// updated code ends
})
.bind('mouseleave', function () {
var $this = jQuery(this);
$this.removeClass('selected').children('.menu-item-has-children').css('z-index', '1');
});
$menu_main_nav.bind('mouseenter', function () {
var $this = jQuery(this);
$oe_overlay.stop(true, true).fadeTo(1000, 0.3);
$oe_overlay.css('z-index', '40');
$this.addClass('hovered');
})
.bind('mouseleave', function () {
var $this = jQuery(this);
$this.removeClass('hovered');
$oe_overlay.stop(true, true).fadeTo(1000, 0);
$oe_overlay.css('z-index', '0');
$menu_main_nav_items.children('.menu-item-has-children').hide();
});
$pricetable_dropdown.bind('click', function() {
if (jQuery( this ).hasClass('clicked')) {
jQuery( this ).removeClass('clicked');
jQuery( 'section.detail-page' ).css('display', 'none');
jQuery( 'section.detail-page' ).css('display', 'block');
} else {
jQuery( this ).addClass('clicked');
// $initialDivHeight = jQuery('section.detail-page').height();
}
jQuery( this ).next().fadeToggle();
});
$menutoggle.bind('click', function() {
$mainmenu.toggle();
});
});
</script>

You're right, the z-index is messing things up... The Overlay is jumping behind some elements on the page before the transition has finished.
There is no need to change the overlays z-index on mouseover, remove this from your JS. Set the overlays 'z-index: 40' in your css and set it to 'display: none' also.
Thats all you need. When you fadeOut() an element it sets 'display: none' on it after it's finished animating, so your mouse won't be able to interact with it, and you can click on anything underneath it.
Hope this helps!

Submenu animation "pops up"

I have a menu with sub items inside it. In order to make animation effect I want, I need to retrieve sub-menu width,height and height of its first-child. Now my animation works ,but sometimes my sub-menu just "pops up" (it doesn't animate its width ).
Here is The Fiddle of the problem.
http://www.vasinternetposao.com/wordpressdevelopment/wp-content/themes/override/images/submenu_problem.png
I am using this code:
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) { //Let's check if "jsub-menu" Class is here
return false; //If it is ("jsub-menu" here) don't SlideDown...
} else { //Else slide down if no class
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
j(this).css({
'height': '',
'width': ''
});
});
});
j('ul.jnav ul.sub-menu a').hover(function () {
j(this).addClass('active');
if (j('.active').next('ul.sub-menu').length) { //If submenu exist...
j('.active').next('ul.sub-menu').css({
'visibility': 'hidden',
'opacity': '0',
'display': 'block'
}); //Show it so we can read its:
var get_width = j('.active').next('ul.sub-menu').outerWidth(true); //WIDTH
var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true); //HEIGHT of its First Child
var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true); //HEIGHT of our menu
j('.active').next('ul').removeClass('sub-menu') //Remove class from menu, add another class apply HEIGHT of FIRST CHILD and hide it again...
.addClass('jsub-menu').css({
'visibility': '',
'opacity': '',
'height': get_height_of_first_child + 'px',
'width': '0'
});
j('.active').next('.jsub-menu').animate({
width: get_width
}, 1000, function () { //Animate WIDTH
j('.active').next('.jsub-menu').animate({
height: get_submenu_height
}, 1000); //callback animate HEIGHT
});
} //End if
}, function () {
j('.active').removeClass('active');
});
});
I think that this is happening because my Slide Up/Down animations are conflicting with my animate with/height functions but I am not sure. I have tried to solve it by adding stop(),stop(true,true),stop(true,false) in numerous combinations but failed. I am trying to solve this for days now so you stackers are my only hope. Please help!
Thank you!!

I was finally able to replicate the error.
I wrote this code for you, to replace the code you have for the animation.
var animating = false;
function animate($elm, options, callback) {
if (animating)
return;
animating = true;
$elm.animate(options, 1000, function() {
animating = false;
if (callback != undefined)
callback();
});
}
Call it like this, from inside your hover callback.
animate(j('.active').next('.jsub-menu'),
{
'width': get_width,
'height' : get_submenu_height
});
Basically, it checks if another animation is already running, in which case it doesn't start it. The Flag is set to false when the animation stopped, and let's other animations go on.
You can also pass a callback to do something after the animation is completed, but in your case you don't need it, because you can animate the height and width in the same time.
I tested it for like a minute and it looked pretty smooth.
Here is the updated feedle: http://jsfiddle.net/gabrielcatalin/TNxJ4/1/
P.S. You may also want to use the $ sign instead of 'j' for jQuery wrappers.

JS/jQuery Change CSS with if/else statement

I'm trying to change the background image of a div using an if/else statement after a user clicks a part of the page. With the code below, the div will collapse as intended, however the accompanying background image does not change.
$(document).ready(function() {
$(".titles-us").click(function() {
$(".map-us").toggle();
$(".map-tri").hide();
$(".map-can").hide();
$(".map-eur").hide();
if ($(".us-icon").css('background-image') === 'url("public/images/collapse-lg.png")') {
$(".us-icon").css({
'background-image' : 'url("public/images/expand-lg.png")'
});
}
else {}
});
});

You can always addClass() with jQuery. Add a class when the user clicks the element. And give that class a background attribute different from the background of the element without that class.
if ($(".us-icon").hasClass('collapsed') == false) {
$(".us-icon").addClass('collapsed');
}
// If you want to remove the background on second click:
else {
$(".us-icon").removeClass('collapsed');
}
In your css, you can add this:
.collapsed {
background-image: url("public/images/expand-lg.png")
}

You can have a setup like this adding/referring to a class
$(document).ready(function() {
$(".titles-us").click(function() {
$(".map-us").toggle();
$(".map-tri").hide();
$(".map-can").hide();
$(".map-eur").hide();
if ($(".us-icon").hasClass('img-collapse'){
$(".us-icon").removeClass('img-collapse').addClass('img-expand');
}
else{
$(".us-icon").removeClass('img-expand').addClass('img-collapse');
}
});
});
and in your CSS:
.img-collapse{
background-image : url("public/images/collapse-lg.png");
}
.img-expand{
background-image : url("public/images/expand-lg.png");
}

I'm not entirely sure why your original code isn't sufficing, but here's a working example you can use to compare:
$(".us-icon").on('click', function() {
var myEl = $(this);
var bgimg = myEl.css('background-image');
if( bgimg === "url(http://placehold.it/200x200)" ) {
myEl.css({ 'background-image' : 'url(http://placehold.it/100x100)' });
} else {
myEl.css({ 'background-image' : 'url(http://placehold.it/200x200)' });
}
});
( fiddle )