Jquery Split screen Image Hover
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. :)