Question

我很难让这个动画在其中包含If Else条件的点击中实现。所以#joinbox始于＆＃34; margin-top＆＃34; 7％，我想让它从＃paper4点击到＃34; margin-top＆＃34; -19％;只有它已经达到了7％。如果没有，我希望点击后返回7％。另外，我使用的是速度js，它只是一个更平滑的.animate功能。

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

这是#joinbox

的原始样式

{{1}}

Answer 1

根据我的记忆.css("margin-top")返回px中的某些内容，例如7px，而不是像7%这样的内容，因此尝试将百分比转换为px。您可以使用$().offset之类的内容进行转换。

尝试console.log($("#joinbox").css("margin-top"))你不会得到我认为的百分比。

Answer 2

因为您只会检索px中的值。您可以使用父宽度并手动计算％。

这样的事情：

＆＃13;

$("#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%')
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何根据边距样式创建If Else条件

2 个答案: