Question

I have this code: http://jsfiddle.net/ZYZLT/2/

but when I put it live online http://bellated.us.lt/supersized/index.html it doesnt work. What I am missing here?

My code:

html:

<div class="ball">Demo</div>

css:

.ball{
    -webkit-border-radius:250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    background: green;
    width : 200px;
    height : 200px;
    text-align: center;
    line-height: 200px;
}

javascript:

<script type="text/javascript">
$('.ball').hover(function(){
    $(this).animate({width : '250px', height : '250px', lineHeight : '250px'}, 300);
        }, 
 function(){
     $(this).stop().animate({width : '200px', height : '200px', lineHeight : '200px'}, 200)
         });
</script>

Answer 1

in your fiddle you have this:

.ball:hover{
 -webkit-transition:all .5s ease-in-out;    
 -webkit-transform:scale(1.5,1.5);        
}

but no javascript.. which is why it works in the fiddle, but only with webkit CSS3-happy browsers..

in your page where it’s not working you have script

<script>  
$('.ball').hover(function(){
    $(this).animate({width : '250px', height : '250px', lineHeight : '250px'}, 300);
        },
 function(){
     $(this).stop().animate({width : '200px', height : '200px', lineHeight : '200px'}, 200)
         });
</script>

but you’re missing document ready, try:

<script>  
$(document).ready(function(){
    $('.ball').hover(function(){
        $(this).animate({width : '250px', height : '250px', lineHeight : '250px'}, 300);
            },
     function(){
         $(this).stop().animate({width : '200px', height : '200px', lineHeight : '200px'}, 200)
             });
});
</script>