Hello,

I am working on this website: nikasimovich.com/beeferman/

It works great in chrome, however, I am running into some issues with the button in the top right corner (#switchplay) in both the ipad and safari.

The intended interaction is:
1) click on #switch play
2) circle rotates, sound icons switch, the reverse class (background color) is elected, and the "side1" text is hidden.
the functioning code is as follows:

var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? 'touchstart' : 'click';
var pauseIcon = $('.pause-icon');
var playIcon = $('.play-icon');

$('#switch-play').bind(event,function(){
$('#circle').transition({rotate: '+=360deg'}, 700, 'easeOutQuint');
$('#sound-1')[0].pause();
$('#sound-2')[0].pause();
$('#sound-1')[0].currentTime = 0;
$('#sound-2')[0].currentTime = 0;
pauseIcon.addClass('hide');
playIcon.removeClass('hide');
$('#player').removeClass('active');
$('body').toggleClass('reverse');
$('#circle').removeClass('spin');
$('.side2-text').toggleClass('hide');
$('.side1-text').toggleClass('hide');

On the ipad, click on #switchplay simply spins the text around but ignores the rest of the actions.

In Safari, the interaction works as intended after the first click. Clicking once on switch play ignores the spinning and does everything else (it switches the text and background) but when you click on it a second or third time, it works the way it is supposed to do.

For ipad, I have tried changing to a ".bind" rather than a ".click" and I have also tried adding a cursor on mouseover as well as adding an empty "onclick" tag in the HTML. I am running out of ideas. Does anyone have any thoughts on how to improve this on ipad or safari? Ipad is a larger priority but perhaps there is one fix for both.

Thank you so much,
Nika