0

I am trying to make a jquery plugin to animate an element to take over another ... take this for example enter image description here

I want to make the animation to carry the Phone div as is and make it in the position and dimension of c1, the div that is highlighted ...

So i ended up making this code which partially worked :

$.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>

it worked for the first purpose , moving the phone div to that at the bottom , however reversing that animation couldn't successfully happen ... Please any help is appreciated and I can give any additional needed info

Seaskyways
  • 3,630
  • 3
  • 26
  • 43

1 Answers1

0

You have to create the "reverse" function.

But you also have to think about taking a "memory" of the CSS values that your 1st function changes... In order to restore them in the 2nd function.

I've made a small... Really basic 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();
})
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • I have tried such methodology , but now , lets say I run my function like this foo.expandTo(foo) , the element gets minimized a bit O.o – Seaskyways Jun 30 '16 at 10:09
  • Hey, I had a funny discussion on another question... And ended on this, which, I think, could help you restore the original stylesheet without having to store it like I suggested. [Have a look here](http://stackoverflow.com/questions/3326494/parsing-css-in-javascript-jquery) – Louys Patrice Bessette Jun 30 '16 at 10:58