Swap background images on click

Question

I create a animation that works when I hover over it, but due to mobile reasons I want the animation to play when the user clicks or touches it.

Here is my js code that makes the hover work, but not sure how to make the onclick work.

$(document).ready(function() {     
    $('.phone').hover(function(){     
        $('.phone').addClass('phone-two');    
    },     
    function(){    
        $('.phone').removeClass('phone-two');     
    });
});

Here is a JSFiddle to explain it better.

score 2 · Answer 1 · edited May 23 '17 at 12:11

With $.on() you can add the 'touchstart' and 'touchend' event.

$(document).ready(function() {     
$('.phone').on({
    'mouseover touchstart': function(){     
         $('.phone').addClass('phone-two');    
     },     
     'mouseout touchend': function(){    
         $('.phone').removeClass('phone-two');     
    }});
});

note that this also preserves your hover event.

here is a great post on mobile touch events: How to recognize touch events using jQuery in Safari for iPad? Is it possible?

DEMO

scald · Accepted Answer · 2014-06-06T02:20:44.997

1

To bind all of your events, use this:

$('.phone').on("mouseover click touchstart touchend",function(){
    $('.phone').toggleClass('phone-two');    
});

Reference: http://api.jquery.com/on/

edited Jun 06 '14 at 02:20

answered Jun 06 '14 at 02:11

scald

729
1
7
10

Thanks that made the click work, but how can I click again to turn off the animation? – daugaard47 Jun 06 '14 at 02:16
1

Use ```toggleClass``` instead of ```addClass``` : $('.phone').toggleClass('phone-two'); – scald Jun 06 '14 at 02:19

score 1 · Answer 3 · answered Jun 06 '14 at 02:20

1

Try this

$('.phone').on('click', function (e) {  
    $('.phone').toggleClass('phone-two');  
});

answered Jun 06 '14 at 02:20

benjamin54

1,280
4
28
48

Just curious what is the (e) stand for or do? – daugaard47 Jun 06 '14 at 02:27
1

It's the jQuery event object. Read through the docs to get some fundamentals, it helps! http://api.jquery.com/category/events/event-object/ – scald Jun 06 '14 at 02:34

Swap background images on click

3 Answers3