Search the Community
Showing results for tags 'image'.
Hi, Just started using Tween for JS, used to use AS version, so i was exited to find a JS version First of all works great, BUT I am having som problems with IE8 (( Basically I am trying to scale a Image from small to VERY large. To maintain relative good quality i have initially scale the image down, and I am then using scaleX/scaleY to scale the image up in size. Works like a charm in Safari, Chrom, Firefox and IE9, BUT breaks in IE8 Seams like IE8 is scalling very poorly, very bad quality when scaled up, but WORSE it seems to hide the overflow, so one can only se the image, in the area where the original image was You can see for yourself here: https://dl.dropboxusercontent.com/u/2146283/html/example.htm and fiddle here: http://jsfiddle.net/ha4PT/8/light/ Hope someone can help, would really prefer this over jquery UI Kind regards Mr.Morton
I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work. I'm trying to use the old 'make a UL inline for a horizontal menu' trick -- I ran through all of these options but couldn't get any to work 1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other. 2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline' The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful. Thanks!
We're trying to use TimelineLite to create a cycle of images. We want to show one image at a time, fade between them, and at the end, cycle back to the first one and repeat. We are getting various results on different browsers. On some, it works fine. On others (*cough* IE8 *cough*), we occasionally see a cut between images instead of a fade. Other times, the wrong image appears. Our images are set up absolutely positioned at the top left in a <div>; the first image is visible immediately; the rest are styled as visibility:hidden. What's the best algorithm for doing this using GSAP, given an arbitrary number of <img> tags (we're using jQuery, too)? We've tried a couple of ways, but the code for such a seemingly simple task gets complex quickly.