jquery click for css image based hover?

Question

I have a page where the use of .button will be used as virtual button. Once clicked it'll shift the background image to do it's "hover animation".

However the code I got doesn't seem to want to do anything, and no errors listed.

    $(".button").click(function(){
        $(this).css('backgroundPosition', '-468px 0').delay(200).css('background-position', '0 0');
    });

I also tried

    $(".button").each(function(){
        $(this).click(function(){
            $(this).css('backgroundPosition', '-468px 0').delay(200).css('background-position', '0 0');
        });
    });

And also tried

    $(".button").each(function(){
        $(this).click(function(){
            $(this).stop().animate({backgroundPosition: "-468px 0"}, 100);
        });
    });

CSS

.button {
    color: #4e5645;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 1px #b3c799;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    height: 120px;
    width: 468px;
    line-height: 120px;
    background: url(button_hover.png) no-repeat;
    cursor: pointer;    
}

HTML

            <div class="buttonc">
                <div class="button">TAX PEOPLE</div>
            </div>

Any ideas? Yes, jQuery core is correctly linked and used for other features.

Edit: Alternatively to the solution below, I found this out today on my own writing casually... Funny how I didn't think of it last night for the hover button. Wow.

    $(".rightctext").click(function(){
        var div = $(this);
        div.css('text-shadow', '0px 0px 20px #fbf5df');
        setTimeout(function(){
            div.css('text-shadow', '0px 0px 10px #474333');
        }, 200);
    });

I suppose not sure how that implies to the javascript aspect. You just use a name to call it, and CSS shouldn't interfere. One second. — WASasquatch
– WASasquatch, Commented Apr 3, 2014 at 5:17

WASasquatch · Accepted Answer · 2014-04-03 23:31:47Z

1

Delay is only valid with animations, .css changes instantly. Instead you can use the animate callback function executed after the animation has completed. I think this is what you are after:

$(".button").click(function(){
     $(this).animate({'background-position-x': '-468px'},200, function(){
         $(this).animate({'background-position-x': '0px'},200);
     });   
 });

EDIT: No animation:

 $(".button").click(function(){
     $(this).animate({'background-position-x': '-468px'},0).delay(200).animate(
         {'background-position-x': '0px'},0);   
 });

Edit by Jordan:

Alternate method I discovered casually as if I never had this problem last night... Wonders what sleep can do. Thanks for the help again everyone.

    $(".button").click(function(){
        var div = $(this);
        div.css('background-position-x', '-468px');
        var end = setTimeout(function(){
            div.css('background-position-x', '0px');
            clearTimeout(end);
        }, 200);
    });

edited Apr 3, 2014 at 23:31

WASasquatch

1,0443 gold badges11 silver badges19 bronze badges

answered Apr 3, 2014 at 5:35

kravits88

13.1k1 gold badge53 silver badges54 bronze badges

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

3 Comments

WASasquatch Over a year ago

That's a good fix, as it works, but I noticed it scrolls the image, instead of instantly changing like it needs to (it's one image that is a button one less colorful, one colorful.) I have been looking at toggleClass but I'm trying to figure out how to correctly remove the added class after a short time after the click.

kravits88 Over a year ago

You can use delay if your using animate. You original code worked except for the delay part. It was just changing css and then changing back instantly so it looked like it wasn't doing anything. Try my edit.

WASasquatch Over a year ago

By golly gee! you did it! I'm trying to see what has changed in the other code to make it snap like it should.

Balder · Accepted Answer · 2014-04-03 05:37:40Z

0

you forgot to put "px".

$(this).css('background-position', '-468px 0px').delay(200).css('background-position', '0px 0px');

edited Apr 3, 2014 at 5:37

Balder

8,7784 gold badges42 silver badges61 bronze badges

answered Apr 3, 2014 at 5:19

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

1 Comment

WASasquatch Over a year ago

Yep just noticed. Added, no go still. "0" and "0px" interpret the same.

Collectives™ on Stack Overflow

jquery click for css image based hover?

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related