i have for example a header (140px height) on the web with 5 "li" content. The first 3 of this (A,B,C) open a subheader (50px height) when ".mouseover", the others 2 (D,E) close all to the begining.
jq(document).ready(function(){
jq("#A a,#B a,#C a").mouseover(function(){
jq("#subheader").animate({top:"140px"},"normal");
});
jq("#D a,#E a").mouseover(function(){
jq("#subheader").animate({top:"91px"},"normal");
});
});
Until here all is ok, now comes the problem. Depend of which A, B or C is hovered has to do diferent things with the subheader, just at the end of the animation. (open .smenus inside subheader)
jq("#A a").mouseover(function(){
jq(".smenu1").slideDown("slow");
jq(".smenu1 ul").animate({margin:"0px auto"},"slow");
jq(".smenu1 li").animate({padding:"0 30px 0"},"slow");
});
jq("#B a").mouseover(function(){
jq(".smenu2").slideDown("slow");
jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");
});
jq("#C a").mouseover(function(){
jq(".smenu3").slideDown("slow");
jq(".smenu3 ul").animate({margin:"0px auto"},"slow");
jq(".smenu3 li").animate({padding:"0 30px 0"},"slow");
});
This doesn't work i think because it start loading before finishing the opening of the suheader. so i have to do this animation when the opening is finished.
PD: And now another thing, when for example #A is hovered, and then #B, it has to stop the animation (if is not finished, or just callback), remove others submenus (in this case .smenu1) and replace it whith theirs submenu (in this case .smenu2). #D and #E has to do the same, putting everything back to the begining.
EDITED:
thanks to Simon, I have more or less this: http://jsfiddle.net/PAXqB/4/
the last implementation is to make it with .click() and not with .mouseover() having this 3 cases:
You have a couple of options
.animate() has a complete callback option :
jq(".smenu2 ul").animate({margin:"0px auto"},"slow", function() {
// code here is executed after this animation is complete
});
Use .queue() , something like :
jq(".smenu2").slideDown("slow");
jq(".smenu2").queue(function () {
jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
jq(this).dequeue();
});
jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");
this simple queues up your animation requests and executes in order
First of all, I'd recommend tidying up your code for readability and making it easier to work with. Example:
$("#A a, #B a, #C a").on('mouseover', function(){
$menu = $(this).find(".menu");
$menu.slideDown("slow");
$menu.find("ul").animate({margin:"0px auto"},"slow");
$menu.find("li").animate({padding:"0 30px 0"},"slow");
}).on('mouseout', function(){
$(this).find(".menu").stop(true, true);
});
Not fully tested, but this should be on the right lines in terms of getting your code working - the .stop() method being the second part of your answer.
I must say I had to read your question multiple times and I'm not yet sure if I understood you right, but is this what you wanted to achieve? http://jsfiddle.net/PAXqB/
$(document).ready( function() {
$('ul.main > li').bind('mouseover mouseout', function(e) {
var t = $(this), i = t.index(), sub = t.find('.sub');
if(i < 3)
switch(e.type) {
case 'mouseover':
sub.stop(true).slideDown( function() {
$(this)
.stop(true)
.animate({ margin:"20px 0 0" })
.find('li')
.stop(true)
.animate({ padding:"0 10px 0" });
});
break;
case 'mouseout':
sub.stop(true).slideUp('fast', function() {
$(this)
.removeAttr('style')
.find('li')
.removeAttr('style');
});
break;
}
});
});
I slightly adjusted the animate-to style so it looks a bit smoother on my jsfiddle, but I hope it helps you.
Sooo this would be my best solution so far for a tablet: jsfiddle I'm working on a version where it acts exactly as you wanted (container just slides down/up if nothing was visible or the clicked item was active), but have some trouble with the animations atm.
$(document).ready( function() {
var active = 'active';
$('ul.main > li').bind('click', function() {
var t = $(this),
i = t.index(),
c = $('.sub-container'),
sub = $( $('.sub').get(i) ),
isActive = t.hasClass(active),
li = sub.find('li'),
liCount = li.length;
c.slideUp('fast', function() {
c.find('*').removeAttr('style');
t.siblings().removeClass(active);
if(i < 3) {
if(isActive) t.removeClass(active);
else {
t.addClass(active);
c.slideDown( function() {
sub.slideDown( function() {
li.animate({
width: (100 / liCount) + '%'
});
});
});
}
}
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.