How do I create an If Else condition based on margin styles

Question

I'm having difficulty making this animation come to fruition upon a click with an If Else condition within it. So the #joinbox starts at "margin-top" of 7%, I want it to move on a click from #paper4 to a "margin-top" of -19%; only if it's already at 7% though. If not, I'd like it to move back to 7% upon the click. Also, I'm using the velocity js which is just a smoother .animate function.

$("#paper4").click(function() {

    if ($("#joinbox").css("margin-top")=="7%") 
        {$("#joinbox").velocity({"margin-top": "-19%"}, 200, "easeInOutQuad");}

         else {$("#joinbox").velocity({"margin-top": "7%"}, 200, "easeInOutQuad");}
});

Here is the original style of #joinbox

#joinbox {
    margin-top: 7%;
    margin-left: 31.5%;
    width: 35%;
    position: fixed;
    box-shadow: 0 5px 10px #332E2C;
    background-color: white;
    padding: 1%;
}

Answer 1

According to my memory .css("margin-top") returns something in px like 7px not percent like 7% so maybe try converting the percentage to px. you could use something like $().offset for conversion.

Try doing console.log($("#joinbox").css("margin-top")) you wont get percentage I think.

Answer 2

Since you will only retrieve the value in px . You can use the parent width and calculate the % by hand.

Something like this:

 $("#paper4").click(function() { var elementMargin = parseInt($('#joinbox').css('margin-top')), parentWidth = Math.round($('#joinbox').parent().width() * 0.07); if(elementMargin === parentWidth) { console.log('margin-top: 7%') } else { console.log('margin-top: -19%') } }); 

 #joinbox { margin-top: 7%; margin-left: 31.5%; width: 300px; height: 100px; background-color: pink; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="joinbox"> </div> <button id="paper4">Hay</button>