CODEWITHSUNDEEP
androidjquerymobile
SkullBallz
SkullBallz

Reputation: 31

jQuery slideToggle Android Lag

I am trying to make a slideToggle work properly on the Android devices. I mean... it works fine, but the slideToggle lags or chops. Here is my code and maybe you guys can help me with this.

EDIT I have been using PhoneGap, and done some research. PhoneGap, apparently, doesn't do well with rendering a lot of media. I chopped down half my content, and realized that the effect works perfectly. However; the effect still chops. Is there a way to optimize PhoneGap to properly render media? I have tried CSS3, but the rendering is still horrible. I changed my images format to GIF, and still no luck. What is my alternative, here? If PhoneGap is the issue, then what should I do to create my Web Based apps?

jQuery

$( ".info" ).click( function(){
$( this ).prev( ".tut-box" ).children( ".info-txt" ).slideToggle( "slow" );

$( this ).toggleClass( "active" );

if ( $( this ).text() == "HIDE INFO" )
   $( this ).text( "SHOW INFO" )
else
   $( this ).text( "HIDE INFO" );
});

HTML

<div class="tut-box">
    <img src="blah.jpg" />

    <span class="arrow"></span>

    <div class="info-txt">
        <div class="txt">
            DISPLAY MESSAGE GOES HERE!

            <div class="fade"></div>
        </div>
    </div>
</div>

<div class="info">SHOW INFO</div>

Upvotes: 2

Views: 1786

Answers (2)

SkullBallz
SkullBallz

Reputation: 31

I solved the problem by optimizing my script to CSS3 implemented with jQuery 2. So far; no slow animations or slow actions. I also replaced this...

$( ".info" ).click( function(){

to this...

$( ".info" ).on( 'touchstart', function(){

It makes tapping actions respond faster. I've discovered this within posts and jQuery Mobile books. Thanks, for the help, Flash Thunder. We tried xD

Upvotes: 1

Flash Thunder
Flash Thunder

Reputation: 12036

I had alot of problems with smooth jQuery animations on Android tablets, but I found a solution that worked for me. Try using this plugin - it basically converts every animation it can to transitions.

Upvotes: 0

Related Questions