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：See this update of your fiddle.

#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变量是你的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 () {});
});

获取变量的css值

3 个答案: