I am trying to make a jquery plugin to animate an element to take over another ... take this for example
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
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();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.