Adding jQuery animation to a custom function
I would like to know if there's any way to add a fade animation to this jquery function that i've built:
var $j = jQuery.noConflict();
$j('#s开发者_C百科eccG').click(swapWith);
function swapWith(){
var tmp = $j(this).html();
var claseOrigen = $j(this).attr("class");
var claseDestino = $j('#seccA').attr("class");
//REMOVES THE CLASSES
$j(this).removeClass(claseOrigen);
$j('#seccA').removeClass(claseDestino);
$j('#Main').removeClass(claseDestino);
$j('#content').removeClass(claseDestino);
//ASSIGN NEW CLASSES
$j(this).addClass(claseDestino);
$j('#seccA').addClass(claseOrigen);
$j('#Main').addClass(claseOrigen);
$j('#content').addClass(claseOrigen);
//EXCHANGE CONTENTS
$j(this).html($j('#seccA').html());
$j('#seccA').html(tmp);
};
The colors are associated with the classes and the positioning with the IDs, so I would like to add a transition to the exchanging divs (#seccA and #seccB).
Thanks in advance :-)
Not sure what you want to fade, but you could try
$j(this).fadeOut("fast").removeClass(claseOrigen);
http://api.jquery.com/fadeOut/
something like this?
var $j = jQuery.noConflict();
$j('#seccG').click(swapWith);
function swapWith(){
var tmp = $j(this).html(),
claseOrigen = $j(this).attr("class"),
claseDestino = $j('#seccA').attr("class"),
self = this,
elements;
//REMOVES THE CLASSES
(elements = $j('#seccA,#Main,#content').add(this))
.removeClass(claseOrigen)
.fadeOut(function(){
// EXCHANGE CONTENTS
$j(self).html($j('#seccA').html());
$j('#seccA').html(tmp);
// ASSIGN NEW CLASSES
elements.addClass(claseDestino).fadeIn();
});
};
jQuery UI extends the functionality of the standard jQuery animations. With it you can animate to properties specified by a css class rather than defining values in the javascirpt. Check out http://jqueryui.com/demos/addClass/
jQuery UI also allows you to animate color properties.
After linking jQuery UI you should be able to simply add a second property to the add and remove class functions for the duration of the animation.
$j(this).addClass(claseDestino,1000);
精彩评论