I have a full page split into 6 sections with a background images
in each section. Also in each section there will be a <article> element.
**What I want to do** When you click on a .section all the other
<article> elements will fade out except for the one that is in
the section that was clicked. Once the .section expands I have an
.excerpt that fades in along with an X to close. When you click the X
I need it to close and fade out the .excerpt and fade back in all the
<article> elements that were previously faded out.
**What it is doing** When I click on an .section all the
<articles> fade out and then the main <article> fades in
once the .section expands. And even WORSE when you click the close it
shrinks back down and then expands the farthest right .section. I need
it to shrink back down and fade in the <articles> again.
Here is the jquery snippet I am using:
-
$('.wrapper > div').click(function() {
-
$(this).toggleClass('go');
-
if($(this).hasClass('go')){
-
$('article').animate({opacity: '0'}, 100);
-
$(this).find('.close, .excerpt,
article').delay(1000).animate({opacity: '1'}, 400);
-
$(this).animate({'width':'100%'},{
-
duration: 1000,
-
step:function(gox){
-
var width = gox < 100 ? (100 - gox) / 5 : 0;
-
$(this).siblings().css('width', width + "%");
-
}
-
});
-
}
-
});
-
-
$('.close').click(function(){
-
$('.wrapper >
div').animate({'width':'16.66%'}, 1000);
-
$('.close, .excerpt').animate({opacity: '0'}, 400);
-
$('article').animate({opacity: '1'}, 100);
-
});
Any help would be greatly appreciated. I am somewhat familiar with
jQuery but I am still learning so please be patient with me. :)