获取变量的css值
获取变量的css值
提问于 2013-08-07 16:01:10
我已经做了一个非常基本的社交滑块，隐藏在我的网站，然后滑出悬停。如果我为当前的css ' left‘属性提供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/
谢谢你们！
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-07 16:27:40
在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发布的文章所示
Stack Overflow用户
发布于 2013-08-07 16:04:44
您也可以完全在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;
}Stack Overflow用户
发布于 2013-08-07 16:07:49
您需要从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 () {});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18108180
复制相关文章
相似问题
腾讯云开发者
