Element animates (slides) in and pushes element across - javascript

I have a div panel that is sliding out on click.
I have a title in the center of the page and what I'm looking for is when the panel slides out, it pushes the title along with it when it hits it, and when it clicks back it pulls the title back to the original position.
Is this possible?
I'm using Ajaxify which I've added the slide in/out transition to so unsure how useful it is, but here's an example:
transition_in = function () {
if (!r(".panel-slide .close").length) {
r(".panel-slide").animate({
marginLeft: "20%"
}, 1e3, "easeInOutCubic")
}
};

Related

Bootstrap accordion, scroll to top of active accordion on click without bouncing back?

I'm adapting a Bootstrap accordion and trying to move the clicked open accordion to the top of the screen.
I am using this solution
When I click on an accordion and another one is open above the clicked one moves out of the screen and then back into it. I do understand that this is because the first open accordion gets closed and the new clicked one moves into that place before it gets pushed down to the top of the screen.
It's in all the solutions on the post I've linked. Is there a way to click on an accordion and it just stays on top of the screen, even when the content before it is closed?
Here is the same problem shown: JSFiddle snippet
click on item 2, scroll down, click on item 3 and item 3 goes off screen and bounces back. It would be so much nicer if it just stayed on top.
With little text it's fine but it looks not that good if there is loads of content in the accordions.
$('.panel-collapse').on('show.bs.collapse', function(e) {
var $panel = $(this).closest('.panel');
var $open = $(this).closest('.panel-group').find('.panel-collapse.in');
var headerHeight = $('.menu-container').outerHeight();
var additionalOffset = 0;
if($panel.prevAll().filter($open.closest('.panel')).length !== 0)
{
additionalOffset = $open.height();
}
$('html,body').animate({
scrollTop: $panel.offset().top - additionalOffset - headerHeight
}, 500);
});

How do I run one Jquery function only after the first is completely done?

So I am using a toggle button in which a menu is toggled on the side. It slides in and out from the left hand side. I am also using bootstrap so it takes up 2 out of 12 sections of a row, with another div (which I will refer to as div x) taking up the other 10. When the button is pressed I am also toggling the class of div x so that it takes up the entire grid space when the menu is toggled off. The issue is it is changing grid size before the animation is finished which makes it go to the bottom of the page and then back to the top. I want the toggling of div x to be done after the menu has been toggled. I have tried moving it around to different parts of the function, and even creating a different function which is called after, but the same issue arises. Here is what I have:
$('#toggle,.contents').click(function() {
if ($('#toggle').is(':visible')) {
$('#moduleList').toggle('slide', {
direction: 'left'
}, 1000);
}else {
$('#moduleList').toggle('slide', {
direction: 'left'
}, 1000, function() {
});
}
$('#toggler').toggleClass('col-md-12 col-md-10');
});
Thanks in advance for any help!
Place $('#toggler').toggleClass('col-md-12 col-md-10'); inside of your empty function. The function should be called once the animation is complete, following the link #Rajesh mentioned.

hoverIntent menu: Entry and exit intents, but with no animation between menu items

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.

Mouse leave event keeps firing in navigation menu

Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>

Animate showing and hiding login box

I am trying to create a jquery animated loginbox.
I am a total javascript/jquery noob.
I have a div that contains the loginbox. That div is about 150px in height, and it is placed at the top of the page, so that only the bottom 15px of the div are visible when the page is loaded.
I am trying to slide down the div so that the rest of the login box is revealed on click, and make it slide back up when the bottom part of the div is clicked again.
Now, I am doing:
$('#showLogin').click(function(e){
$('#formContainer').animate({top: "+=135px"} , 1500)
e.preventDefault()
})
What this does is animate the slide down of the div. But how can I check if it has already been slided down so I can slide it back up?
Should I check for the position of the div and decide if it should move up or down, or is there a better way to do it?
The website is here
I think you are looking for .slideToggle(). An example: http://jsfiddle.net/FL4zZ/
Try this jsFiddle example. It animates a div with a form within it on click, and retracts it once it's fully extended.
The basic jQuery is:
$('div').click(function() {
var pos = $(this).css('top')
if (!$(this).is(':animated')) {
if (parseInt(pos, 10) == 0) {
$(this).animate({'top': '-35px'}); // anim up
}
else {
$(this).animate({'top': '0px'}); //anim down
}
}
});

Categories

Resources