JQuery Animasyonunu Tersine Çevirme

Question

Genelde JQuery ve web dev için çok yeni ve biraz yardıma ihtiyacım var. Bunu birkaç günlüğüne geziyorum ve işe yarayan bir çözüm bulamıyorum. Burada da aynı soruyu çokça sordum ama birçok cevap JQuery'nin mevcut sürümünde güncelliğini yitirdi.

Temelde, ekranın ortasında tıklatıldığında odaklanmak istediğim bir 'div' var. Bu bölüm iyi çalışıyor. Ne yapacağımı bilemediğim aynı zamanda 'div' kelimesi 2. kez tıklandığında orijinal konumuna geri döner.

$(document).on("page:change", function() { 
    $("#profile").on ("click", function() { 
    $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'}); 
    $("#profile").css("position", "absolute"); // So that the div can maintain its normal position in bootstrap grid up until animation 
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades everything else on page 
    }); 
}); 

Yani, çoğunlukla sadece 2 tıklama üzerine operasyon bu seti 'geri al' için bir yol gerekir. Şu andaki uygulamamdan tamamen farklı bir fikriniz varsa, tamamen açıkım. Yardım için teşekkürler!!!

Answer 1

bu deneyin: koduyla

function firstClick() { 
 
    alert('put your animation'); 
 
    $(this).one("click", secondClick); 
 
} 
 
function secondClick() { 
 
    alert('put your reverse animation'); 
 
    $(this).one("click", firstClick); 
 
} 
 

 
$("#profile").one("click", firstClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="profile"> 
 
click me 
 
</div>

:

function firstClick() { 
    $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'}); 
    $("#profile").css("position", "absolute"); // So that the div can maintain its normal position in bootstrap grid up until animation 
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades everything else on page 
    }); 
} 
function secondClick() { 
// reverse your animation 
} 


$(document).on("page:change", function() { 
$("#profile").one("click", firstClick); 
});