1

ここでばかげたことを見逃しているに違いありませんが、なぜこれがうまくいかないのかわかりません

    $('#fleet').hover(function(){
        var fleet = '2';
        $("#fleetHover").show();
        $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
    }, function(){
        $("#fleetHover").hide();
          $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
    });

要素にカーソルを合わせると、必要な高さが拡張されます。しかし、マウスアウトしても元に戻りません。

しかし、高さを変数ではなく値としてこれを行うと、機能します。

    $('#fleet').hover(function(){
        var fleet = '2';
        $("#fleetHover").show();
        $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
    }, function(){
        $("#fleetHover").hide();
          $("#fleet").animate({ "height": "-=60px" }, "slow");
    });

ここで何が欠けていますか？私はゆっくりとJS/jQueryのものを学んでいますが、変数を複数回使用することはできませんか?

どんな助けでも素晴らしいでしょう！

4

2 に答える 2

4

変数fleetは、最初の無名関数の内部で定義され、スコープが設定されています。2 番目の無名関数にはアクセスできません。1 つの解決策は、両方の関数の外で変数を定義することです。

var fleet = '2';
$('#fleet').hover(function(){        
    $("#fleetHover").show();
    $("#fleet").animate({ "height": '+=' + (fleet * 30) + 'px' }, "slow");
}, function(){
    $("#fleetHover").hide();
    $("#fleet").animate({ "height": '-=' + (fleet * 30) + 'px' }, "slow");
});
于 2013-10-02T18:11:19.983 に答える
1

このオプションが不要な場合は、この回答を削除します。

CSSホバー状態でCSS3アニメーションを使用するだけです。

.grow {
  height: 140px;
  width: 40px;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 100px;
  background: mediumSeaGreen;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.grow:hover {
  height: 200px;
}

jsfiddle

于 2013-10-02T18:14:24.150 に答える