jquery - 変数の CSS 値を取得する

Question

私は非常に基本的なソーシャル スライダー バーを作成しました。このスライダー バーは、サイトの横に隠れ、ホバーするとスライドします。現在のcssの「左」プロパティにjQueryの設定値を指定するとすべて機能しますが、左のプロパティを取得して変数として設定しようとすると、スクリプトが機能しなくなります。私は何かを逃しましたか？

$('#slider').mouseenter(function () {

    var cssleft = $(this).css('left');

    if ($('#slider').css('left') === "cssleft") {
        $(this).animate({
            left: '0'
        }, 300, function () {});
    } else {
        $(this).animate({
            left: ("cssleft" + 'px')
        }, 100, function () {});
    }

});

$('#slider').mouseleave(function () {
    $(this).delay(1000).animate({
        left: ("cssleft" +  'px')
    }, 500, function () {});
});

ここに値が設定された作業バージョンがあります

http://jsfiddle.net/TjTNm/

みんなありがとう！

Answer 1

jQuery を使用せずに、これを完全に CSS3 で行うこともできます。フィドルのこの更新を参照してください。

#slider{
    position:fixed;
    left:-70px;
    padding:10px;
    border:1px solid #f00;
    transition:left 0.5s ease 1s;
    -webkit-transition:left 0.5s ease 1s;
}

#slider:hover {
    left:0;
    transition:left 0.5s;
    -webkit-transition:left 0.5s;
}

Answer 2

jQuery アクションの外部で左オフセット変数を定義して初期化します。

var cssleft = $('#slider').css('left');

$('#slider').mouseenter(function () {
    if ($('#slider').css('left') === cssleft) {
        $(this).animate({
            left: '0'
        }, 300, function () {});
    } else {
        $(this).animate({
            left: cssleft
        }, 100, function () {});
    }

});

$('#slider').mouseleave(function () {
    $(this).delay(1000).animate({
        left: cssleft
    }, 500, function () {});
});

また、変数を引用符で囲まないでくださいcssleft。そうしないと、文字列として解釈されます。

参照: http://jsfiddle.net/audetwebdesign/qR7z5/

脚注

theftpreventionの投稿に示されているように、トランジションを使用した HTML5 のアプローチははるかに洗練されています。

Answer 3

cssleft の周囲から逆コンマを削除する必要があります。これは mouseleave でも定義されていません。cssleft 変数は、mousenter 関数に対してローカルです。

$('#slider').mouseenter(function () {

    var cssleft = $(this).css('left');

    if ($('#slider').css('left') === "cssleft") {
        $(this).animate({
            left: '0'
        }, 300, function () {});
    } else {
        $(this).animate({
            left: (cssleft + 'px')
        }, 100, function () {});
    }

});

$('#slider').mouseleave(function () {
    $(this).delay(1000).animate({
        left: (cssleft +  'px')
    }, 500, function () {});
});