[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery fadeIn and fadeOut affecting :before elements set with CSS

Posted on 2014-08-25
6
Medium Priority
?
289 Views
Last Modified: 2014-08-26
On this test page:
http://bbdesign.com/herbein.com

The big, centered text is marked up like this:

<div class="hometext">
	<h3>We Provide</h3>
	<h1>Direction</h1>
	<h2>We chart a financial course that reflects your family,<br />
		career, retirement plans, charitable aspirations<br />
		and much more.</h2>
</div>

Open in new window


To make a wide, separated double-line effect, I used a CSS ":after" selector to add a second border to the H1 element:

h1:after{content:' ';
position:absolute;
z-index:-1;
bottom:-5px;
left:0;
right:0;
border-bottom:1px solid rgba(255,255,255,0.5);}

Open in new window


I used that same technique in a few other places throughout the site, and it seems to work nicely. However, on the home page, there is also some fadeIn and fadeOut animation happening:

function homeAnimation(){
	$('div.hometext:nth-child('+curImg+')').fadeOut(1000, function(){
		$('div#homebg img:nth-child('+curImg+')').fadeOut(1000);

		if (curImg===maxImg){curImg=1;} else {curImg++;}

		$('div#homebg img:nth-child('+curImg+')').fadeIn(800, function(){
			$('div.hometext:nth-child('+curImg+')').fadeIn(800);
		});
	});
}

Open in new window


When the page initially loads (and the content fades in), the double-line looks great, but once the animation is complete, my ":after" element disappears for some reason. This seems to happen in the Firefox browser (Safari and Chrome are OK so far). Is there something about that element that a jQuery animation would not like? Wondering if anyone else has seen this happen.

Other, static pages have the same effect that works without a problem, such as:
http://bbdesign.com/herbein.com/who-we-are.htm

Thanks!
0
Comment
Question by:bbdesign
  • 3
  • 2
6 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 40284431
your page doesn't work, 404 error, page not found
0
 
LVL 58

Expert Comment

by:Gary
ID: 40284435
Get rid of the after and amend your border-bottom to

6px double rgba(255, 255, 255, 0.5)

Sometimes it's the simple things
0
 
LVL 58

Expert Comment

by:Gary
ID: 40284453
p.s.
You might wanna add a little text-shadow to your tag lines just to make them stand out a little better - something like

text-shadow: 1px 2px 0 black;
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:bbdesign
ID: 40285755
I was unable to get the lines to look the way the design agency wanted using "double" on a border. They wanted more space between the two lines.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40285780
Remove the z-index from the :after class
0
 

Author Comment

by:bbdesign
ID: 40285891
Ah, that seems to have fixed it. I added z-index based on this article:
http://css-tricks.com/snippets/css/multiple-borders

This is their explanation:

"This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value."

But I don't see any real issue in the website, now that I have removed them all.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month17 days, 17 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question