Why jQuery effects don't work on my mobile but do work on my desktop

Question

This is my jQuery code:

$(document).ready(function(){

$('.get-btn').click(function(){
    $(this).parent().find('#get-btn').hide();
    $(this).parent().find('#install-btn').show('slide', {direction: 'right'}, 250);
});

$('#get_btn').click(function(){
    $(this).hide();
    $('#install_btn').show('slide', {direction: 'right'}, 250);
});

The .show works great with the 'slide' effect. When opening the page on my mobile, the 'slide' effect don't work. (the ".show" works fine though.. ) How to enable the 'slide' effect on my mobile too?

I have these tags on my html code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Answer 1

Get a faster mobile.

Assuming jQuery is programmed correctly (I really hope it is, but you never know...), it uses delta timing and requestAnimationFrame for its animations, which will make the animation take the exact same amount of time, regardless of framerate. But if your phone browser isn't capable of keeping up with animations that well, you may just get a single frame of animation, giving the appearance of it not working.

The other option is to make your page more lightweight. CSS animations work extremely well on most mobile devices, and can be controlled without the overhead of jQuery. Of course, this comes at the cost of increased development time.