iFrame Flicker Fix while using .animate, or .draggable

Throughout coding you find alot of things that don't work as they should, or not how you like it to. I have run into this toooo many times. cc/miLock, miWeather.

One thing I searched endlessly to fix is iframe flicker while using .animate. Not strange that it would cause a flicker, but how to get rid of it? This is what I did.

Surround your iframe div with two other divs.  So basically

<div id="trans"></div>
<div class ="weatherdisplay">
<iframe id="weatherframe" scrolling="no" frameborder="0"  src="weather/main.html"></iframe>
<div id="trans2"></div>

Now in the css you will want to make trans and trans2 transparent and add overflow:hidden. This is very important to add overflow:hidden to each div that surrounds the iframe. Now on your iframe add overflow:auto;

Thats it should not flicker while .animate is used or if your are using .draggable.

If you are using .animate and still get a flicker create a stop for the animation.

do
{
$(".handle").stop();
$(".wrapper").stop();
$(".tran").stop();
$(".trans").stop();
curleft += obj.offsetLeft;
curtop += obj.offsetTop;

if(curtop < -1100){
               
$(".handle").animate({ top:"320px"}, 2000);
$(".wrapper").animate({ top:"320px"}, 2000);
$(".tran").animate({ top:"-500px"}, 2000);
$(".trans").animate({ top:"-500px"}, 2000);


}
Here if curtop < -1100 then it will animate these items to the top. See I kept the trans with the animation also. Sometimes you will still get a flicker, reason for 

                        $(".handle").stop();
$(".wrapper").stop();
$(".tran").stop();
$(".trans").stop();

Hope it helps someone, burned quite a few hours fighting this one.