-1

ここで、境界線の特定のコーナーをアニメーション化する方法について説明している素晴らしい例を見つけました。しかし、今まで何の変化もなかったようです。イン関数とアウト関数にアラートを挿入した後、それらが起動されることを確認しました。ただし、コーナリゼーションへの変更はありません。

それは私がdivをどのようにスタイリングしたかと関係がありますか？

div.menuItem {
    border-width: 5px 3px;
    border-style: solid;
    border-radius: 25px 45px 25px 45px;
    font: 30px Arial;
    font-weight: bold;
    padding: 15px;
    display: block;
    width: 200px;
    border-color: #00bb00;
    color: #fff;
    background-color:#8822cc;
    -webkit-text-stroke: 1px #000;
}

そして、これがスクリプトです。

$('div.menuItem').hover(function () {
            alert("in");
    $(this).animate({
        "MozBorderRadiusTopleft": '50px',
        "MozBorderRadiusTopright": '50px'
    }, 900);
}, function () {
            alert("out");
    $(this).animate({
        "MozBorderRadiusTopleft": '25px',
        "MozBorderRadiusTopright": '25px'
    }, 900);
});
4

1 に答える 1

1

あなたは単にCSSトランジションを使うことができます：

div.menuItem {
    border-radius: 25px 45px 25px 45px;
    transition: border-radius .9s;
    /* all other properties... */
}
div.menuItem:hover {
    border-radius: 25px;
}

これがフィドルです：http：//jsfiddle.net/ucVPg/

PSベンダープレフィックスを忘れないでください。

于 2012-07-24T01:39:43.490 に答える