Join 3,512 readers in helping fund MetaFilter (Hide)


Help with a javascript effect please!
December 7, 2009 11:17 AM   Subscribe

I'm trying to implement this moo tools javascript effect to fade in, and then fade out a single image element, and I need help to make it work. This is my attempt.

As you can see, when you click my effect link, the image fades up just as I would like, and when you click my effect link again, the image fades away, but then my problems start! After fading away, the image all of a sudden reappears, and then, when you click the link again, it just fades and reappears. I just want the clickable link to toggle the image on and off.

I do not know javascript at all, and haven't been able to figure out what is causing this. this is the code I am using for onload:
window.onload = function() {

// MOO.FX OPACITY 
	aboutOpacity = new fx.Opacity('aboutContent', {duration: 1500, onComplete: function()
 		 { aboutOpacity.setOpacity(1); } 
  	});
		
	aboutOpacity.setOpacity(0);		
}

// HIDE/DISPLAY FUNCTIONS 
function displayAbout() { document.getElementById('aboutContent').style.display = ''; }

function hideAll() {
		document.getElementById('aboutContent').style.display = '';
		}
and this is the html I am using to trigger the effect:
onclick="hideAll();displayAbout(); aboutOpacity.toggle(0, 1);
posted by bonsai forest to Computers & Internet (3 answers total) 1 user marked this as a favorite
 
I don't know mootools specifically, but you should be setting the display to either 'block' (show this element) or 'none' (don't show this element), not to an empty string. Otherwise you're depending on the browser to interpret '' as you intend.

If you're not wed to mootools, jQuery includes fadeIn and fadeOut functions.
posted by yerfatma at 11:33 AM on December 7, 2009


IMO it's the
onComplete: function()
 		 { aboutOpacity.setOpacity(1); } 
in your script. I don't know mootools, but when you toggle aboutOpacity from 1 to 0, it will slowly transition over 1500ms, then after it's done will set the opacity back to 1. This is why. Get rid of that part!
posted by suedehead at 11:41 AM on December 7, 2009


Thank you suedehead - I had tried getting rid of that part earlier on my own, but because I don't know the syntax I think i deleted or included a closing brace incorrectly. Works great on my site now. (I am leaving it messed up on the example page for a few days before I delete)
posted by bonsai forest at 11:54 AM on December 7, 2009


« Older What exactly should my landlor...   |  I have recently incorporated m... Newer »
This thread is closed to new comments.