Comments on: Image Cross Fade Transition http://jqueryfordesigners.com/image-cross-fade-transition/ Tutorials and screencasts Thu, 22 Sep 2011 12:58:42 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: David Heriot http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7913 David Heriot Fri, 09 Apr 2010 09:52:42 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7913 <p>Hi, this is a great post - (almost) exactly what I wanted. The only extra thing I wanted was the ability to fade down the other images (I have 4 images on a page - when I replace one using this technique I wanted to fade down the others). So I changed this line: $$.stop().animate({opacity: 0}, 250); to this line: $$.stop().animate({opacity: 0}, 250).siblings('.grid_4').css('opacity', '0.6');</p> <p>Worked great in FF and Chrome, but couldn't get it to work at all in IE (v8, didn't test other versions). Any ideas anyone? Can't figure it out.</p> <p>thanks </p> <p>David Heriot</p> Hi, this is a great post – (almost) exactly what I wanted. The only extra thing I wanted was the ability to fade down the other images (I have 4 images on a page – when I replace one using this technique I wanted to fade down the others). So I changed this line: $$.stop().animate({opacity: 0}, 250); to this line: $$.stop().animate({opacity: 0}, 250).siblings(‘.grid_4′).css(‘opacity’, ’0.6′);

Worked great in FF and Chrome, but couldn’t get it to work at all in IE (v8, didn’t test other versions). Any ideas anyone? Can’t figure it out.

thanks

David Heriot

]]> By: d.villain http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7875 d.villain Wed, 31 Mar 2010 13:48:12 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7875 <p>Those of you with weird underline issues in safari/chrome, may fix them thusly:</p> <p>a:-webkit-any-link { text-decoration: none; }</p> <p>You are all welcome.</p> Those of you with weird underline issues in safari/chrome, may fix them thusly:

a:-webkit-any-link { text-decoration: none; }

You are all welcome.

]]> By: vadim http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7852 vadim Wed, 24 Mar 2010 12:58:59 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7852 <p>is it possible to explaine how to do the same transition but with click function. I mean I would like to instead of hover, be able to click on the image to start transition and click again to start transition again , and so on and so on. Thanks</p> is it possible to explaine how to do the same transition but with click function. I mean I would like to instead of hover, be able to click on the image to start transition and click again to start transition again , and so on and so on. Thanks

]]> By: Mike Hall http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7334 Mike Hall Fri, 22 Jan 2010 11:57:33 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7334 <p>Hi I was using this Css here http://jqueryfordesigners.com/image-cross-fade-transition/ using method three. Just refuring to this section of the code :</p> <pre><code>-webkit-transition: opacity 1s linear; </code></pre> <p>how can i speed up the up time of the fade but maintain the fade down time or really just try and make the fade faster than 1s. Ive tried −1s and 0.5s but non seem to affect the fade time.</p> <p>Thanks Mike</p> Hi I was using this Css here http://jqueryfordesigners.com/image-cross-fade-transition/ using method three. Just refuring to this section of the code :

-webkit-transition: opacity 1s linear;

how can i speed up the up time of the fade but maintain the fade down time or really just try and make the fade faster than 1s. Ive tried −1s and 0.5s but non seem to affect the fade time.

Thanks Mike

]]> By: Belinda http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7183 Belinda Mon, 11 Jan 2010 23:12:48 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7183 <p>I wonder if I can use the above to do something I'm working on... </p> <p>I want to be able to click on the image, and have it transition into a new image for a second or two, before loading a new page. </p> <p>If anyone has any thoughts or tips, I'd love to hear them :-)</p> I wonder if I can use the above to do something I’m working on…

I want to be able to click on the image, and have it transition into a new image for a second or two, before loading a new page.

If anyone has any thoughts or tips, I’d love to hear them :-)

]]> By: George http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7177 George Sun, 10 Jan 2010 11:02:21 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7177 <p>I cannot make it to work on my Wordpress. I tried everything far I know. I have checked jQuery and it shows me alert message that it works. But rollover the image - no chance. Any advice? </p> <p>Thanks</p> I cannot make it to work on my WordPress. I tried everything far I know. I have checked jQuery and it shows me alert message that it works. But rollover the image – no chance. Any advice?

Thanks

]]> By: Matt Peltier http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7149 Matt Peltier Wed, 30 Dec 2009 17:46:33 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7149 <p>Hey guys,</p> <p>It's a great tutorial, but I can't seem to get rid of a gray border that appears around items that use this with anchor tags.</p> Hey guys,

It’s a great tutorial, but I can’t seem to get rid of a gray border that appears around items that use this with anchor tags.

]]> By: Luke http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7132 Luke Wed, 23 Dec 2009 03:12:07 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7132 <p>Is there a way to create this so that instead of the Jquery cross fading images, it fades a series of background images on a parent div (images to be specified in an array or something), however instead of the crossfade happening onfocus, can it be done automatically like a photogallery kind of effect.</p> <p>I have been trying to create something like this so I can have a background image changing every 10 seconds or so and yet still have content over the top.</p> <p>I am looking for a JQuery solution since Flash is out of the question :)</p> <p>Thanks!</p> Is there a way to create this so that instead of the Jquery cross fading images, it fades a series of background images on a parent div (images to be specified in an array or something), however instead of the crossfade happening onfocus, can it be done automatically like a photogallery kind of effect.

I have been trying to create something like this so I can have a background image changing every 10 seconds or so and yet still have content over the top.

I am looking for a JQuery solution since Flash is out of the question :)

Thanks!

]]> By: Roberto Sanchez http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7131 Roberto Sanchez Tue, 22 Dec 2009 23:13:16 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7131 <p>Don't know how many people read this, but... I've found a different way of doing this that also works in all the browsers. Basically, you still have the two images, but the immediate parent of the images must be a div instead of a span. The div has a width small enough that the .fade image wraps to the next line, so that it is immediately under the first image. Then, apply a negative margin-top to the .fade image as far as it will go above the first image. You will notice that it will be out from the top of the first image by 10-20 pixels, so you must apply a negative margin-bottom to the first image until the images line up. Here's a basic example:</p> <p>CSS div { width:232px;} .firstImage { margin-bottom:-19px;} .secondImage { margin-top:-239px;} img {width:232px; height:254px;}</p> <p>JS $('.secondImage').hover(function() { $('.secondImage').stop().fadeOut(250); }, function() { $('.secondImgae').stop().fadeIn(250); });</p> <p>HTML Gah, it stripped the html, but from the CSS you can probably build up the HTML. </p> <p>As you can see, the margins will depend on the height of the images, and the width of the parent div will depend on the width of the images, although the width of the div is much more flexible, as it can be as high as 463px before both images will just appear side-by-side instead of one on top of the other.</p> Don’t know how many people read this, but… I’ve found a different way of doing this that also works in all the browsers. Basically, you still have the two images, but the immediate parent of the images must be a div instead of a span. The div has a width small enough that the .fade image wraps to the next line, so that it is immediately under the first image. Then, apply a negative margin-top to the .fade image as far as it will go above the first image. You will notice that it will be out from the top of the first image by 10-20 pixels, so you must apply a negative margin-bottom to the first image until the images line up. Here’s a basic example:

CSS div { width:232px;} .firstImage { margin-bottom:-19px;} .secondImage { margin-top:-239px;} img {width:232px; height:254px;}

JS $(‘.secondImage’).hover(function() { $(‘.secondImage’).stop().fadeOut(250); }, function() { $(‘.secondImgae’).stop().fadeIn(250); });

HTML Gah, it stripped the html, but from the CSS you can probably build up the HTML.

As you can see, the margins will depend on the height of the images, and the width of the parent div will depend on the width of the images, although the width of the div is much more flexible, as it can be as high as 463px before both images will just appear side-by-side instead of one on top of the other.

]]> By: h1brd http://jqueryfordesigners.com/image-cross-fade-transition/comment-page-6/#comment-7039 h1brd Wed, 25 Nov 2009 20:56:32 +0000 http://jqueryfordesigners.com/image-cross-fade-transition/#comment-7039 <p>Is there any fix for making it work when i need to have the fade div as a relative position?</p> Is there any fix for making it work when i need to have the fade div as a relative position?

]]>