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;
});

Trigger CSS animation only if button has not been clicked

In the following code, on .hover() the #wrap element's height in animated via jQuery animate().
On handlerIn the element gains 250px of height and on handlerOut it loses 250px of height.
The issue is that I've also included a "button" that gives the user the ability to remove that 250px of height that is added on .hover(handlerIn). When the user clicks this "button", then moves the mouse outside of the hover element (handlerOut); the hover element loses 250px twice.
I'd like to only trigger the .hover(handlerOut) function if the user has not clicked the "button".
Fiddle
$(document).ready(function() {
$("#wrap").hover(
function() {
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
function () {
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
if(expanded = true){
$("#button").on('click', function(){
$('#wrap').animate({height: '-=250px'}, 'slow');
$("#button").hide();
return false;
});
};
});

(Though I don't necessarily think you're going about this the right way) You need to make sure you're setting expanded to false after you click the X, i.e., telling the code that the box is no longer expanded and that it shouldn't reduce the size of the box further:
$(document).ready(function() {
$("#wrap").hover(
function() {
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
function () {
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
if(expanded = true){
$("#button").on('click', function(){
$('#wrap').animate({height: '-=250px'}, 'slow');
$("#button").hide();
return expanded = false; //This is all I changed
});
};
});
That works. Fiddle
EDIT
A word of warning - you should really think twice before using the jQuery.animate() function. Compared to say, something like CSS animations or a far better js animation platform like GSAP, the jQuery.animate() function is around 10x slower ::reference.
Personally I'd use GSAP, but either way you shouldn't spend much more time learning this workflow - it will only hinder you in the future!

Broken Multi-Tier JQuery Accordion

JSFiddle
http://jsfiddle.net/5rkrq4bw/strong text
JQuery Code
// Side Menu Starts
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
if(!$(this).hasClass('Active')) {
if(!$(this).parent().parent().hasClass('Active') && $(this).next().hasClass('sub-menu')) {
$(this).next().slideToggle();
$(this).addClass('Active');
} else {
$('.SideNav .Menu li ul').slideUp();
$(this).next().slideToggle();
$('.SideNav .Menu a.MenuDrop').removeClass('Active');
$(this).addClass('Active');
}
}
});
//Side Menu Ends
The Problem
Trying to integrate multiple tiers I am finding the problem of only being able to have one open at a time and checking to see if any others are open to close them.
What should happen
Demo
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Explanation
Only one 'Category' to be expanded at a time
Only one 'Sub-Cat' inside to be expanded at a time
Adding / removing of 'Active' class.

Resolved: http://jsfiddle.net/wo4sj4pt/
JQuery Code:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = $('.Active');
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
if (!effect) {
$(el)
.toggleClass('active')
.parent('li')
.siblings()
.find('a')
.removeClass('active')
.parent('li')
.children('ul, div')
.slideUp('fast');
}
$(el)
.siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
Usage:
Link to JQuery and the above script
Make a multi-level list
Give your list a class/ID name such as '.SideNav'
Tell the script this is your accordion $('.SideNav').accordion();

http://jsfiddle.net/sabithpocker/5rkrq4bw/2/
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
console.log(this);
var subMenuToExpand = $('ul.sub-menu', $(this).parent());
var otherVisibleSubMenu = $('ul.sub-menu:visible', $(this).parents('.Menu'));
otherVisibleSubMenu.hide();
subMenuToExpand.show();
});
$('.SideNav .Menu a.MenuDrop').click(function(event){
$('ul.sub-menu:visible', $(this).parents('.Menu')).slideUp(50);
$('ul.sub-menu', $(this).parent()).slideDown();
});

Using JQuery to resize and realign images doesn't work on first load

So I am relatively inexperienced with Jquery. What I did was purchase a wordpress theme from theme forest and it has a portfolio section which is supposed to work either as a masonry or grid layout. Neither of which load correctly on first load. The theme uses the Isotope, and I think this link explains what needs to be done: http://isotope.metafizzy.co/appendix.html#imagesloaded
Below is the code that I think calls this function, and the site can be viewed here https://www.roseryflowers.com/bridal-gallery/
jQuery(document).ready(function($) {
/*-- Portfolio --*/
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({filter: '.element'});
$(window).trigger('resize');
$('.portfolio-links a').click(function(e){
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope( {filter: selector} );
});
}
I am at a loss for what to do here. Any help would be appreciated. I even implemented a preloader.

Remove the imagesloaded.js file from your page and change the line with
$(window).trigger('resize');
to
$(window).load(function(){ $(window).trigger('resize'); });

From Isotope's documentation
Unloaded images can throw off Isotope layouts and cause item elements
to overlap. imagesLoaded resolves this issue. imagesLoaded works by
triggering a callback after all child images have been loaded.
initialize Isotope after all images have loaded
var $container = $('#container').imagesLoaded( function() {
$container.isotope({
//options
});
});
This could be the problem
There is a little bit more about...
EDIT
your wrapper tag is ".portfolio-items" then try this
var $container = $('.portfolio-items').imagesLoaded(function () {
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({ filter: '.element' });
$(window).trigger('resize');
$('.portfolio-links a').click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope({ filter: selector });
});
}
});
You need to be sure to add ImagesLoaded to your project https://github.com/desandro/imagesloaded

Javascript/Jquery Slide effect happening in the wrong place

I have a section of my page that incorporates the Jquery slide effect but the div that is supposed to slide into the place of the original is sliding too low, then just popping into place. I'm not quite sure why it is behaving this way. What should I do to make the new div slide on the same plane as the original div? Below is my JS as well as a link to a fiddle so you can see what I mean exactly. Thanks!
http://jsfiddle.net/vYDqC/
$(document).ready(function() {
$("#content div").hide();
$("#tabs li:first").attr("id","current");
$("#content div:first").effect("slide", 800);
var animating = false;
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){
return;
}
else{
if(!animating)
$("#content div").hide("slide", {direction: "right"}, 800, function() { animating = true; });
$("#tabs li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('name')).show("slide", {direction: "left"}, 800, function() { animating = false;});
}
});
});

I've had this problem before with jQuery's slide effect. Try adding position: absolute to your .con class. Then you'll want to add width: 100% for it to fill out the parent div.
http://jsfiddle.net/vYDqC/2/