jQuery插件动画扩展元素以接管另一个

Question

我正在尝试创建一个jquery插件来动画元素来接管另一个元素......以此为例

我想让动画按原样携带Phone div并使其位于c1的位置和尺寸，即突出显示的div ...

所以我最终制作了部分有效的代码：

＆＃13;

＆＃13;

$.fn.expandTo = function (targetId) {
    targetId = $(targetId);
    var mView = $(this);
    log('POSITION');
    log(mView.position());
    log('OFFSET');
    log(mView.offset());

    if(mView.position() === undefined) mView = mView.parent();

    mView.animate({
        position : 'absolute',
        height : targetId.height(),
        width : targetId.width(),
        top : targetId.position().top,
        left : targetId.position().left
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

它的作用是为了第一个目的，将手机div移动到底部，但是反转动画无法成功发生...请任何帮助表示赞赏，我可以提供任何其他所需信息

Answer 1

您必须创建“反向”功能。

但是你还必须考虑对第一个函数改变的CSS值进行“记忆”...以便在第二个函数中恢复它们。

我做了一个小...真的很基本 Fiddle example here 。

// An object used as "memory"
var Mem={};

// Changes some CSS
$.fn.modified = function () {
    Mem.color = $(this).css("color");   // Store the color in "memory"
    Mem.size = $(this).css("font-size");    // Store the font-size in "memory"
    $(this).css({"color":"#00FF00","font-size":"3em"});
}

// Retreive the originally defined CSS
$.fn.initial = function () {
    $(this).css({"color":Mem.color,"font-size":Mem.size});
}



// Button triggers the modified() function
$("#modifyStyle").click(function(){
    $(".item").modified();
})

// Button triggers the "initial() function
$("#retreiveStyle").click(function(){
    $(".item").initial();
})