Search code examples
jqueryscale

jQuery Scale Effect Not Working

Edit: It seems like hide and show effects don't work, but other effects work fine.

I'm trying to make some graphics grow when the page load, but it's not working so far. Simply nothing happens. The thing is that other jQuery effects work just fine. I'd appreciate any help!

My html;

<div id="graphics">

<div id="twitter"><p>social media connected</p></div>

<div id="seo"><p>search engine optimized</p></div>

<div id="hand"><p>easy to update</p></div>

<div id="responsive"><p>responsive</p></div>

</div>

and my css;

#graphics {
margin: 170px auto 0 auto;
width:700px;
height:80px;
}

#graphics p{
margin-top:75px;
text-align:center;
font-size:1em;
}


#twitter, #seo, #hand, #responsive {
height:72px;
width:105px;
float:left;
margin-right:0px;
}


#twitter {
background-image:url(images/twitter.png);
margin-right:93px;
}

#seo {
background-image:url(images/seo.png);
margin-right:93px;
}

#hand{
background-image:url(images/hand.png);
margin-right:93px;
}

#responsive {
background-image:url(images/responsive.png);
}

and last, javascript code;

$(document).ready(function() {
     $("#twitter").show( "scale", 
     {percent: 100, }, 2000 );
});
Solution

  • I believe scale requires jQuery UI.

    You also have an extra , in your code.

    I was able to get the effect working by hiding the element initially and including jQuery UI:

    Example

    HTML:

    <div id="twitter" style="display: none;"><p>social media connected</p></div>

    code:

    $("#twitter").show( "scale", {percent: 100}, 2000 );