JSFX Fading Image Rollovers? - There's a much better way!

[jscheuer1]

I did. Have you tried the new animate opacity only code:

Height shouldn't be an issue if we fade out using opacity only:

	window.onbeforeunload = function(){
		$('#d1').animate({opacity: 0});
	};

[KennyP]

John:

For as many times as I looked at the above code in your previous posting of it, I thought it referred
to the initial fade-in, which was already working perfectly. Finally I understood...

I tried it, and It's working flawlessly. Not only does the fade-out look better than that created by
the previous code, but it does not create any of the page sizing problems I mentioned earlier.

Out of curiosity, as I look at the code, am I guessing correctly that this same code could probably
function to create various types of animations by substituting their function names into the code?
Maybe scrolling the content down on page open, and scrolling it back up on page close, or an array
of different effects for different pages?

Thank you so much for your help,

Kenny

[jscheuer1]

Out of curiosity, as I look at the code, am I guessing correctly that this same code could probably
function to create various types of animations by substituting their function names into the code?
Maybe scrolling the content down on page open, and scrolling it back up on page close, or an array
of different effects for different pages?

If by function names you mean property names, yes. There's at least one important restriction. The properties used must be ones that can be incremented/decremented numerically in base 10.

[KennyP]

Thanks for the info John. In the future maybe some other effect would work for the site design.

Although the code is now working so well, the Friends page still fades-in abruptly. I think it's due to the large content in that div, as all the other pages have little content, and they all fade in smoothly. There are about 150 comments entered, and growing. If you think of a way to deal with it, please let me know?

Many thanks,

Kenny

[KennyP]

Hello again John:

As you know, I used your following script set at 0.60 : 0.60 in order to retain the translucent style
of the menu. However, on several other pages, in addition to the menu, I'd also like to fade other
images using a 1 : 1 setting. I tried to figure out how to add that variation to work on the same
page for over a day, but failed. When you get the opportunity, would you please show me how it
can be added?

This is just one of the pages showing two images of backward arrows I'd like to fade.

<script type="text/javascript">
jQuery(function($){
	var finOp = document.body.filters? 0.60 : 0.60;
	$('.jqImgFader').hover(function(){
		$(this).find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp}, 400);
	}, function(){
		$(this).find('img').animate({opacity: 0}, 400);
	});
});
</script>

Thank you,

Kenny

[jscheuer1]

The:

$('.jqImgFader')

selects the td elements of the class="jqImgFader" which each must have one background image and then another similar (in dimensions and look) actual image (using an img tag) that gets faded in on top. So for this to be portable to other rollovers, a similar HTML markup must be used. There's also style (the width and height are applied to the td elements but are those of the images):

<style type="text/css">
.jqImgFader {
	width: 164px;
	height: 38px;
}
.jqImgFader img {
	visibility: hidden;
}
</style>

associated with these rollovers. A different class name would probably be the best way to distinguish one type or set of rollovers from another. This class then would be used in the markup, the function as well as in the style.

Since you are using 0.60 : 0.60, you don't really need to test for filters. But with 1 : 1, you may need to. You will if the faded in image is .png and has partial opacity.

So let's say your additional class is jqImgFader2 and the images are 125 x 80 and you have setup a similar HTML markup for them (additions highlighted):

<style type="text/css">
.jqImgFader {
	width: 164px;
	height: 38px;
}
.jqImgFader2 {
	width: 125px;
	height: 80px;
}
.jqImgFader img, .jqImgFader2 img {
	visibility: hidden;
}
</style>

and:

<script type="text/javascript">
jQuery(function($){
	var finOp1 = 0.60, finOp2 = document.body.filters? 0.90 : 1;
	$('.jqImgFader, .jqImgFader2').hover(function(){
		var el = $(this),
		finOp = el.hasClass('jqImgFader')? finOp1 : finOp2;
		el.find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp}, 400);
	}, function(){
		$(this).find('img').animate({opacity: 0}, 400);
	});
});
</script>

Both the styles and the script may be made external and be linked/tagged into the head of the page(s) using either of these classes.

Note: This is all untested.

[KennyP]

Thank you for your reply, especially because of your explanation in addition to the code.

As you can see on this page, the additional image class is fading perfectly.

I made the effort to enter the td code as I did for the menu, but for some reason, the fading over image displays
with the effect of a button being pushed in.

The folowing is correct no?

<td class="jqImgFader2" background="/images/back-white.gif" width="232" height="20" style="background-repeat:no-repeat"><a href="$return_link"><img src="/images/back-red.gif" width="232" height="20" border="0"></a></td>

Many thanks for the rescue and Regards,

Kenny

[KennyP]

Hi John:

Sorry to have to bring this up again... suddenly the onbeforeonload opacity fades only to about 50%, whereas previously it faded entirely. What could have happened? When you get the opportunity would you please take a look? Thanks.

Welcome page

Home page

jqOpacityFade.js:

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1300, 'linear', function(){
			if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
				fleXenv.globalInit();
			}
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
	window.onbeforeunload = function(){
		$('#d1').animate({opacity: 0});
	};
})(jQuery);

[KennyP]

I tried setting the animate opacity setting to minus numbers, but the fade is lost. So I set it back to 0.

window.onbeforeunload = function(){
		$('#d1').animate({opacity:-5});

[jscheuer1]

Well, if it was working before, perhaps you have a backup. Looking at it, it appears as though there just isn't enough time. The beforeunload is meant for a one shot deal - do something(s) real quickly, as quickly as possible before the page unloads. The animate method requires transformation over time. So if we speed it up, that might allow it to complete:

	window.onbeforeunload = function(){
		$('#d1').animate({opacity: 0}, 'fast');
	};

If that works, we may be able to slow it down again by delaying the loading of the next page. But that would be tricky, so let's do this test first.