I've created a fiddle
http://jsfiddle.net/d9wf1s44/
When I click the hamburger menu, the breadcrumbs toggles away to right, and after that the function executes which shows the menu.
$menu_toggle.on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeToggle(600);
});
});
Now the issue is that when I click again, naturally, the same thing will happen, the breadcrumb will toggle and menu will fade out. It's just that I'd like first the menu to fade out, and then the menu to toggle in. How can I do that? animate is used for css manipulation and I tried doing everything with css transitions and delay, but couldn't achieve the nice result like here, I like the toggle animation that the breadcrumbs has, so that's why I'm using toggle (also the breadcrumbs get display none, so the menu is right next to the icon).
How can I control what happens on second click? How to separate this?
You have to make alternate animation for close the menu
after you toggle class "open", you have to do as below :
if($(this).hasClass('open')){ //open function
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeIn(600);
});
}else{
$navigation.fadeOut(600, function(){
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800)
});
}
you can check my jsfiddle demo http://jsfiddle.net/euds0n6x/
Related
Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!
I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end
Add the following: $(".logo").hide() to the $(document).ready(function () {});
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
I am using jquery ui tabs. I want to apply sliding content effect when switching between tabs i.e on showing and hiding of the tabs content. Here is my DEMO
I'm trying to slide the tab divs with the content in them when I click on the navigation above it all. So Nav link 1 would slide the content of #tabs-1 in front of the screen, etc.
The script I have currently, which has no sliding functionality is :
$(document).ready(function () {
$('#tabs').tabs();
$('.sub-nav a').click(function () {
$('.sub-nav li a').removeClass('subnav-active');
$(this).addClass('subnav-active');
});
});
I've tried to do slideToggle, as well as just a fading out and fading in effect, but couldn't get either to work. So i'm reaching out for some assistance, even if all it is, is somewhere to look, that would be greatly appreciated since i'm not the greatest at javascript or jQuery.
jQueryUI has effects built in. No need to roll your own.
http://api.jqueryui.com/slide-effect/
http://jsfiddle.net/isherwood/9jg4r/4/
$('#tabs').tabs({
hide: {
effect: "slide",
duration: 1000
}
});
Here's an example with show and hide effects: http://jsfiddle.net/isherwood/9jg4r/5
Right, so I have a main menu on my site, and I'm using the Hover Intent plugin to show sub-menus. When hovering the menu will fade in with easing, and of course will fade out with easing when the mouse moves away.
Now, what I'm trying to do seems quite simple, but I just don't know how to implement it. I need to be able to only animate the first menu that I navigate to, but when I hover between them, there should be no animation.
For example, let's say I have the following menu structure:
Home
About
Company
Mission & Vision
Solutions
About our solutions
Money-back guarantee
Contact Us
"About" and "Solutions" both have sub-menus. If I hover my mouse over "About", I want its sub-menu to fade in. If I move mouse directly from "About" to "Solutions", I want the visible sub-menu to simply disappear (no fading), and the "Solutions" sub-menu to simply appear (no fading). Then, when the mouse leaves "Solutions", that menu should fade out.
It might sound silly at first, but I have a reason for this process. See, I have a page-wide block element behind the sub-menus that also animates with the menus themselves. Its purpose is to make the menus stand out better. Now, I don't want that fading out every time I switch between menus.
Is this possible?
Here's my current [basic] code right now:
MainMenu = {
setup: function(menu, over, out) {
$(menu).hoverIntent(function() {
$(this).find('div, ul')[over]({duration: 450, easing:'easeInOutQuad'});
$('div.backFade')[over]({duration: 450, easing:'easeInOutQuad'});
}, function () {
$(this).find('div, ul')[out]({duration: 450, easing:'easeInOutQuint'});
$('div.backFade')[out]({duration: 450, easing:'easeInOutQuint'});
});
}
}
MainMenu.setup('div.menuPlaceHolder > ul > li:has(div,ul)', 'fadeIn', 'fadeOut');
Found it:
MainMenu = {
setup: function(menu, over, out) {
$(menu).hoverIntent({
over: function() {
$(this).find('div, ul').stop()[over]({duration: 450, easing:'easeInOutQuad'});
$('div.backFade').stop()[over]({duration: 450, easing:'easeInOutQuad'});
},
out: function () {
$(this).find('div, ul').stop()[out]({duration: 450, easing:'easeInOutQuint'});
$('div.backFade').stop()[out]({duration: 450, easing:'easeInOutQuint'});
},
interval: 0
});
}
}
I just set the interval method to 0 and added stop() to each action. So, the menus will always animate (which is okay, I guess), but the backFade will not.
I have a horizontal animated menu that has a strange behavior because it works fine only first time, after that the expandable menu is not animated and I don't understand why the
ul#nav ul{display:none;} is not applied any more... this is jQuery function that I use for animation.
function mainMenu(){
$('ul#nav').find('> li').hover(function(){
$(this).find('ul')
.stop(true, true)
.slideDown('slow');
});
};
Maybe this will work:
function mainMenu(){
$('ul#nav').find('> li').hover(function(){
$(this).find('ul')
.stop(true, true)
.slideDown('slow');
}, function(){ $(this).find('ul').hide(); });
};
the problem is that the first time you have your <ul> hidden so it's working just fine. After slideDown(), the <ul> becomes visible but when you move your mouse, you just change the left attribute, not the display. Basically, the <ul> is already visible so slideDown is not working.