Question

我需要制作一个看起来像纸牌的页面。点击一张卡片，卡片会翻转并显示有关它的详细信息。我已经使用jquery实现了翻转动画。但我需要翻转和增长卡，因为细节有很大的内容。我到现在为止做的动画有点太生涩了。这就是我到目前为止所做的事情：

HTML：

<div class="flipbox-container0">
    <div class="flipbox0" onclick="flip()"> <span class="spans">Maturity Date</span>

    </div>
</div>
<div id="text1" style="display:none">
    <p style="margin-left:-2.25%; width:100%; background-color:#D5E04E; padding-bottom:10px; padding-left:22px; padding-top:10px;">Maturity Date</p>
    <p>Close</p>
    <p>A bond’s maturity date refers to a specific date in the future on which the investor’s principal will be repaid. Maturities can range from as little as one day to as long as 30 years. The length of a bond’s maturity often correlates to the bond’s risk factor. A bond that matures in one year will typically be less risky than one that matures in 20 years since there will be less price fluctuation in shorter maturities.
        <br />
        <br />Bonds are often referred to as being short-, medium- or long-term. Generally, a bond that matures in one to three years is referred to as a short-term bond, while medium-term bonds are generally those that mature in four to 10 years. Long-term bonds are typically those that mature in more than 10 years.
        <br />
        <br />Once the bond’s maturity is reached, the final interest payment and the original principal are paid to the investor.
    </p>
</div>

使用Javascript：

function flip()
{
    $(".flipbox0").flippy({
        color_target: "white",
        duration: "300",
        onMidway : function(){
            $(".flipbox0").width(500);
            $(".flipbox0").height(500);
            $(".flipbox1").hide();
            $(".flipbox2").hide();
            $(".flipbox3").hide();
            $("#text1").show();
        }
    });
}

CSS：

.flipbox0 {
    -webkit-transform: rotateY(0deg);
    opacity: 1;
    background-color: #D5E04E;
    background-position: initial initial;
    background-repeat: initial initial;
    width:250px;
    height:300px;
    border:3px solid #FF9900;
    border-radius:25px;
    z-index:1;
}
.spans {
    margin-left: 0%;
    margin-top: 80%;
    position: absolute;
    background-color: #FFF;
    top: -23%;
    width: 100%;
    text-align: center;
}
#text1 {
    margin-top: -35%;
    z-index: 2;
    position: absolute;
    width: 35%;
    margin-left: 1%;
    text-align: justify;
}

任何帮助将不胜感激。提前谢谢。

在jquery中翻转和增长动画

0 个答案: