12/12/2009, 18:36
|
 | | | Fecha de Ingreso: noviembre-2007 Ubicación: Palo Alto CA
Mensajes: 25
Antigüedad: 17 años Puntos: 0 | |
 Traducir plugin de Mootools a JQuery
Hola tengo un pequeño código en Mootools y lo necesito tener en JQuery
¿saben por dondé empezar?
Código:
window.addEvent('domready', function(){
var list = $$('.left a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:100, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': -1
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0
});
});
});
});
window.addEvent('domready', function(){
var list = $$('.right a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:100, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 1
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0
});
});
});
});
window.addEvent('domready', function(){
var list = $$('#hp');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:100, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 3
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0
});
});
});
});
window.addEvent('domready', function(){
var list = $$('#projects p a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 4,
'padding-top': 5,
'padding-bottom': 5
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'padding-top': 0,
'padding-bottom': 0
});
});
});
});
window.addEvent('domready', function(){
var list = $$('.cnt a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'color': '#fff'
});
});
element.addEvent('mouseleave', function(){
fx.start({
'color': '#777'
});
});
});
});
window.addEvent('domready', function(){
var list = $$('a#hplink');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-top': -60
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-top': -55
});
});
});
});
if (/msie/i.test (navigator.userAgent)) {
window.addEvent('domready', function(){
var list = $$('.PrevOverlay a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': -10
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0
});
});
});
});
window.addEvent('domready', function(){
var list = $$('.NextOverlay a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-right': -10
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-right': 0
});
});
});
});
}
else
{
window.addEvent('domready', function(){
var list = $$('.PrevOverlay a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
//'opacity': '1',
'margin-left': -10
});
});
element.addEvent('mouseleave', function(){
fx.start({
//'opacity': '0.001',
'margin-left': 0
});
});
});
});
window.addEvent('domready', function(){
var list = $$('.NextOverlay a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
//'opacity': '1',
'margin-right': -10
});
});
element.addEvent('mouseleave', function(){
fx.start({
//'opacity': '0.001',
'margin-right': 0
});
});
});
});
}
window.addEvent('domready', function() {
var content1 = $('horizontal_slide');
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {duration: 650, mode: 'horizontal'});
//var a = 0;
//myHorizontalSlide.show().slideOut.delay(500, myHorizontalSlide);
content1.setStyle('display','block');
myHorizontalSlide.hide();
$('h_slidein').addEvent('mouseenter', function(e){
e.stop();
myHorizontalSlide.slideIn();
});
$('h_slidein2').addEvent('mouseenter', function(e){
e.stop();
myHorizontalSlide.slideIn();
});
$('projects').addEvent('mouseleave', function(e){
e.stop();
myHorizontalSlide.slideOut();
});
});
y otro muy diminuto
Código:
window.addEvent('domready', function() {
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {duration: 350, mode: 'horizontal'});
myHorizontalSlide.slideIn();
});
Realmente no esta muy documentado el tema así que recurro a ustedes...  GRACIAS
Si necesitan ver el CSS y el Live Demo me avisan |