FREAKIN’ AWESOME UPDATE – 08/24/11: It appears this problem is now fixed (mostly?). HUGE shout-out to Micah Topping (a commenter below) for giving the link for this. If you now look at my cog animation above in IE7/8, this now works as I want it to, with no apparent differences. I did have to place the images within the divs rather than use a CSS background.
<div id="myWrapper"><img src="images/myImage.png" /></div>
And the CSS:
#myWrapper img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}One finaly note….I DID have to take this out of my script that I am using or it wouldn’t work. It was overwriting the filter being put on by the CSS (full script shown further down):
Even more applause goes to Dan Tello who gave the solution here. I tried the jquery script that was provided there, but I could not get that to work.
END OF UPDATE!
Before I go into what I want to talk about tonight, I need to first toot my own horn a little. I received an email from one of the editors over at onextrapixel.com, inviting me to be a guest writer. Now who knows what will happen with that, but I am extremely excited and honored that they would ask me. I put a lot of work into The Web Machine, so I am just a little bit proud that they would ask me. I am nervous, but in a good way. Here, I can write how I want because its my blog. There, I just hope I don’t embarrass myself. Wish me luck, and I’ll keep you informed of what happens. Seriously, thanks to onextrapixel.com for asking. You made this blogger/web developer very happy just by doing so.
Now…FORWARD! Onto the meat of the post! I should warn you though, that it is partly a story too.
If you have been paying attention here, and reading my posts, you will notice I implemented an animation on my logo using jQuery. I’m quite proud that I got this to work with so little code. Or, at least that was what I thought. The main goal was to fade in the cogs one at a time in sequential order while moving them a certain distance to the left. Just for a refresher, here is the code again:
var cogs = $('#cog1, #cog2, #cog3, #cog4, #cog5').css({'opacity' : 0});
i=0;
leftAmount = 0;
function cogMovement () {
$(cogs[i++]).animate({
'left': 63 * leftAmount++,
'opacity': 1,
'filter': ''
}, 800, arguments.callee);
};
cogMovement(); (more…)
