получить значение css для переменной

Question

Я создал очень простой социальный слайдер, который скрывается сбоку моего сайта, а затем выкладывается на паре. Все это работает, если я задаю значения jQuery для текущего свойства css 'left', однако, когда я пытаюсь получить свойство 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

Define и инициализировать левое смещение переменных за пределы ваших действий 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 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, это также не определено на 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() {}); 
});