[英]jQuery plugin to animate expanding an element to take over another
我正在嘗試制作一個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移至底部,但是卻無法成功完成動畫的逆轉...請提供任何幫助,我可以提供任何其他必要的信息
您必須創建“反向”功能。
但是您還必須考慮對第一個函數更改的CSS值進行“存儲” ...以便在第二個函數中恢復它們。
// 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();
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.