开发者

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);

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜