将 jQuery 动画添加到自定义函数

Question

我想知道是否有任何方法可以向我构建的 jquery 函数添加淡入淡出动画：

var $j = jQuery.noConflict();
    $j('#seccG').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);
};

颜色与类以及 ID 的定位相关联，因此我想为交换 div 添加过渡（#seccA 和#seccB）。

提前致谢 ：-）

Answer 1

不确定你想要淡出什么，但你可以尝试
$j(this).fadeOut("fast").removeClass(claseOrigen);

http ://api.jquery.com/fadeOut/

Answer 2

像这样的东西？

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

Answer 3

jQuery UI 扩展了标准 jQuery 动画的功能。有了它，您可以对 css 类指定的属性进行动画处理，而不是在 javascirpt 中定义值。查看 http://jqueryui.com/demos/addClass/

jQuery UI 还允许您设置颜色动画特性。

链接 jQuery UI 后，您应该能够在动画持续时间内简单地将第二个属性添加到添加和删除类函数中。

$j(this).addClass(claseDestino,1000);