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

【问题标题】：Adding jQuery animation to a custom function将 jQuery 动画添加到自定义函数
【发布时间】：2011-03-22 02:51:47
【问题描述】：

我想知道是否有任何方法可以为我构建的这个 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）添加一个过渡。

提前致谢:-)

【问题讨论】：

标签： jquery animation jquery-animate

【解决方案1】：

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

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

【讨论】：

【解决方案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();
        });
};

【讨论】：

【解决方案3】：

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

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

链接 jQuery UI 后，您应该能够在动画期间简单地向 add 和 remove 类函数添加第二个属性。

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

【讨论】：