jQuery插件，用于动画化扩展元素以接管另一个元素

Question

我正在尝试制作一个jQuery插件来为一个元素设置动画以接管另一个...以这个为例

我想使动画按原样携带Phone div，并使它位于c1（突出显示的div的位置和尺寸）中...

所以我最终做了这段代码，部分有效：

 $.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 }); 

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

它的工作是第一个目的，将手机div移至底部，但是却无法成功完成动画的逆转...请提供任何帮助，我可以提供任何其他必要的信息

Answer 1

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

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

我做了一个小...真正的Fiddle基本示例 。

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