獲取變量的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() {}); 
});