Question

但是当我把它放在网上http://bellated.us.lt/supersized/index.html时，它不起作用。我在这里缺少什么？

我的代码：

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

你的小提琴你有这个：

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

但没有javascript ..这就是为什么它适用于小提琴，但只适用于webkit CSS3-happy浏览器..

在您无法使用的页面中，您有脚本

<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>

但是您遗失了文档，请尝试：

<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>

Answer 2

将你的js代码包装在document.ready中，即$（function（）{//你的代码}）

我的javascript出了什么问题？

2 个答案: