get css value for variable

Question

I have made a very basic social slider bar that hides at the side of my site, then slides out on hover. It all works if i give the jQuery set values for the current css 'left' property, however when i try and get the left property and set it as a variable the script stops working. Have i missed something?

$('#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 () {});
});

There is a working version with set values here

http://jsfiddle.net/TjTNm/

Thanks guys!

theftprevention · Accepted Answer · 2013-08-07 16:04:44Z

2

You could also do this entirely in CSS3, without any 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;
}

answered Aug 7, 2013 at 16:04

theftprevention

5,2433 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Wilkinson Over a year ago

thanks for your response. I would have preferred to do it this way but it has to be compatible with IE7 unfortunately.

Community · Accepted Answer · 2017-05-23 12:05:17Z

1

Define and initialize your left offset variable outside of your jQuery actions:

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 () {});
});

Also, do not put quotes around the variable cssleft otherwise it will be interpreted as a string.

See: http://jsfiddle.net/audetwebdesign/qR7z5/

Footnote

The HTML5 approach using transitions is much more elegant, as shown in the post by theftprevention

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 7, 2013 at 16:27

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Comments

David MacCrimmon · Accepted Answer · 2013-08-07 16:07:49Z

0

You will need to remove the inverted commas from around the cssleft, it's also not defined on the mouseleave, the cssleft variable is local to your mousenter function.:

$('#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 () {});
});

answered Aug 7, 2013 at 16:07

David MacCrimmon

9661 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

get css value for variable

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related