0

ページの読み込み後に div の幅をアニメーション化しようとしていますが、うまくいきません。

基本的に、div は display:none に設定されており、ページの準備ができたら幅をアニメーション化したいと考えています。

<script>


$(document).ready(function() {

   $('.graph').animate({width:"40%"},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>

.graph {width: 400px;
height: 250px;
position: absolute;
background-image: url(../images/roll.png);
display: none;
}

jquery を動作させることはできません。

4

3 に答える 3

0

それが原因ですdisplay: none;またあなたのコードは無効です。

このjsFiddleの例を確認してください。問題が解決します。

http://jsfiddle.net/af2yj/

$(document).ready(function() {
    $(".graph").show();
    $('.graph').animate({width:"40%"},{queue:false, duration:600, easing: 'easeOutBounce'});
});
​

あなたの例では、未使用でした}）; セミコロンでanimate（）関数を閉じていません。

于 2012-07-23T13:24:25.620 に答える
0 
$(".graph").show();

.show（）;する必要があります。それは最初に...それは表示のためです：なし; それを隠している、そしてあなたはそれを見せていない...

于 2012-07-23T13:25:22.307 に答える
0

jQuery は、要素を単独で可視化する方法を知りません。CSS を使用して、ブラウザーに明示的に非表示にするように指示した要素の幅をアニメーション化するように指示しています。そのため、最初に要素を表示してからアニメーション化する必要があります。

$(function(){
    $("#foo")
        .show()
        .animate(
            { width: "40%" }, 
            { duration: 600, easing: 'easeOutBounce' }
        );    
});

フィドル: http://jsfiddle.net/kjCnX/1/

于 2012-07-23T13:27:54.270 に答える