获取变量的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的行动左边偏移变量外：

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

Answer 2

你也可以这样做完全是在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 3

您将需要来自各地的cssleft删除引号，它也不会在鼠标离开定义的，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() {}); 
});