-1

何らかの理由で、.animate を適切に機能させることができないようです。誰でも理由がわかりますか？

これをコンテナdivに使用しています...

#valve-menu {
    position: absolute;
    width: 780px;
    top: 200px;
    background-color: #9C3;
    margin-right: 9px;
    margin-left: 10px;
}

それから..

#control-cover{
    height: 50px;
    width: 180px;
    overflow: hidden;
    position: absolute;
    }
#control{
    background-color: #0C9;
    height: 200px;
    width: 180px;
    margin-right: 10px;
    position: absolute;
    }

私のJqueryはこれです

$(document).ready(function(){

    //When mouse rolls over
    $("#control-cover").mouseover(function(){
        $(this).stop()
               .animate({height:'150px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#control-cover").mouseout(function(){
        $(this).stop()
               .animate({height:'50px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

コントロール div を部分的に非表示にしてから、onmouseover を展開したいと考えています。

4

2 に答える 2

3

これは機能しています。イージング プラグインを使用していない場合、jQuery SwingとLinear内でデフォルトで使用できるのは 2 つだけです。 jQuery Web サイトhttp://api.jquery.com/animate/から

イージング

.animate() の残りのパラメーターは、使用するイージング関数を指定する文字列です。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。jQuery ライブラリの唯一のイージングの実装は、swing と呼ばれるデフォルトのイージングと、一定のペースで進行するリニアと呼ばれるイージングです。プラグイン、特に jQuery UI スイートを使用すると、より多くのイージング機能を利用できます。

    $(document).ready(function(){

        //When mouse rolls over
        $("#control-cover").bind('mouseover mouseenter',function(){
            $(this).stop()
            .animate({height:'150px'},
            {queue:false, duration:600, easing: 'swing'})
        });

        //When mouse is removed
        $("#control-cover").bind('mouseout mouseleave',function(){
            $(this).stop().animate({height:'50px'},
            {queue:false, duration:600, easing: 'swing'})
        });

    });
于 2011-04-15T20:01:21.373 に答える
0

jQueryのセレクターは、 HTML でidを$('#control-over')持つ要素を検索します。コード サンプルから、というCSSクラスがあるように見えます。2つは同じではありません。control-over<div id="control-over">control-over

属性を html 要素に追加するかid=、 などのクラス名で要素を検索する必要があります$('.control-over')。

于 2011-04-15T17:49:47.113 に答える