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

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

3 个答案: