?
Solved

jquery animate background flicker

Posted on 2012-08-20
9
Medium Priority
?
922 Views
Last Modified: 2012-08-21
Can someone please tell me why when the menus animate on this page, the background glow flickers? and how to correct it?

www.judsondesigns.com/pos/index.html

Click the left and right arrows at the top of the screen.

Judson
0
Comment
Question by:judsonmusic
  • 5
  • 4
9 Comments
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38315718
You likely haven't received any feedback on this question because it is a bit too general.  I've looked at your page but immediately realized that you are counting on me to dig in to your HTML, CSS, and javascript files to find the place where the slide animation is triggered.  

Why not post the important parts of the sliding code and then we can get cracking on the flicker - which btw I see in Chrome.
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38315759
If you view source and go to scripts.js. It's the toggleMenuLeft and toggleMenuRight.

I'm using simply $('mymenuselector').show('slide', {direction: 'left'});

You can use "inspect element" in firebug or most other browser the see my very simple markup and CSS for this.

I'm not near a computer to post code but will later today if truly needed.

Thanks in advance,
Judson
0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 2000 total points
ID: 38315832
Looks like jquery ui's show() method over-rides your style rules during the animation.  I've changed the CSS and Javascript (rolled my own animation) that looks pretty close to the effect you are going for.  

CSS - Notice that the elements are positioned off screen
.menu-left{
	position: absolute;
	top: 0px;
	left: -120px;
	background: #999;
	display:none;
	z-index:0;
}
.menu-right{	
	position:absolute;
	top: 0px;
	right:-42px;
	background:#999;
	display:none;
	z-index:0;
	text-align:center;
}

Open in new window



Javascript
toggleMenuLeft=function(el){
	
	var oneToShow = $(el)	
	if(oneToShow.is(':hidden')){
		oneToShow.show().animate({left: "0px"});
	}else{
		oneToShow.animate({left: "-120px"}, function(){ $(this).hide() });
	}		
	
	
}//end//

toggleMenuRight=function(el){
	
	var oneToShow = $(el)	
	if(oneToShow.is(':hidden')){
		oneToShow.show().animate({right: "0px"});
	}else{
		oneToShow.animate({right: "-60px"}, function(){ $(this).hide() });
	}		
	
	
}//end//

Open in new window

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.

 
LVL 3

Author Comment

by:judsonmusic
ID: 38316138
As you can imagine im really not keen on this approach, but it works. I was trying to avoid it at all costs. I not a big fan of having things off of the screen then bringing them into view, but oh well. Thanks!
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38316239
If you use your Firebug, you can watch the styling that the Jquery UI applies during that animation.  You could then hack together some sort of css "!important" rules to ensure that your style sticks.  But, that might be more trouble than it's worth.
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38316250
is there way to pause that styling when it happens or does it stay intact so you may see it?
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38316260
Yeah.  No.  Pain in the ass!  I had the same experience and couldn't get it to stop either.
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38316271
Oh well, the life of web devlopment. I still love firebug though. I have never been able to get IE devloper console to do anything.
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38316280
I'm Chrome all the way.  Used to use FF Firebug, but Chrome's stuff was nice...so stuck with that.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

850 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