advanced search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

1man on 04/28/08


Tagged

javascript library jquery mootools


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

hariharank12
martingoldszein
korzhik
joomla


jQuery / Mootools Fade Toggle and Background Change

Published in: JavaScript 

I have been meaning to learn how to use mootools for a while. As i already know how to use jQuery i thought a great way to learn would be to compare the 2 syntaxes side by side.

I'm sure there is a way of using a toggle method in mootools, so once i figure out how i will update.


Plain TextExpand 
  1. /**
  2.  * @author Matt Hobbs
  3.  * @projectDescription Comparing jQuery and mootools
  4.  */
  5.  
  6. //Set jQuery into no conflict mode
  7. var $j = jQuery.noConflict();
  8.  
  9. /**
  10.  * Mootools v1.11
  11.  * Click an anchor and the selected element fades from 1 to 0 The backgreound 
  12.  * changes to a specified color and then back again on click.
  13.  */
  14. window.addEvent('domready', function(){ //mootools domready
  15. 	var origBG = $('testElementM').getStyle('background-color');
  16. 	var fadeColor = '#DFD1D1';
  17. 	$('clickMeM').addEvent('click', function(evt){
  18. 		var myFX;
  19. 		if($('testElementM').hasClass('faded')){
  20. 			myFX = new Fx.Style('testElementM', 'opacity').start(0,1); //Create new style on selected element
  21. 			$('testElementM').removeClass('faded').setStyles({
  22. 				'background' : origBG
  23. 			});
  24. 		} else {
  25. 			myFX = new Fx.Style('testElementM', 'opacity').start(1,0); //Create new style on selected element
  26. 			$('testElementM').addClass('faded').setStyles({
  27. 				'background' : fadeColor
  28. 			});
  29. 		}
  30. 		new Event(evt).stop(); //Stop the event from following the link
  31. 	});
  32. });
  33.  
  34. /**
  35.  * jQuery v1.2.3
  36.  * Click an anchor and the selected element fades from 1 to 0 The backgreound 
  37.  * changes to a specified color and then back again on click.
  38.  */
  39. $j('document').ready(function(){ //jQuery domready (can also do $j(function(){})
  40. 	var origBG = $j('#testElementjQ').css('background-color');
  41. 	var fadeColor = '#DFD1D1';
  42. 	$j('#clickMejQ').toggle(function(){
  43. 		$j('#testElementjQ').fadeTo('slow', 0).css({
  44. 			'background' : fadeColor
  45. 		});
  46. 		return false;
  47. 	}, function(){
  48. 		$j('#testElementjQ').fadeTo('slow', 1).css({
  49. 			'background' : origBG
  50. 		});
  51. 		return false;
  52. 	});
  53. });

Report this snippet 

You need to login to post a comment.