jquery - 获取变量的css值

Question

我制作了一个非常基本的社交滑块，它隐藏在我的网站一侧，然后在悬停时滑出。如果我为当前的 css 'left' 属性提供 jQuery 设置值，这一切都有效，但是当我尝试获取 left 属性并将其设置为变量时，脚本停止工作。我错过了什么吗？

$('#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

您也可以完全在 CSS3 中完成此操作，无需任何 jQuery：请参阅您的小提琴的此更新。

#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/

脚注

使用过渡的 HTML5 方法要优雅得多，如theftprevention的帖子所示

Answer 3

您需要从 cssleft 周围删除引号，它也没有在 mouseleave 上定义，cssleft 变量是 mouseenter 函数的本地变量。：

$('#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 () {});
});