Question

我的HTML是：

<html>
    <body>
        <button id="widthPlus">increase </button>
        <div id="bod"> hai </div>
        <img id="tree" src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="350"/>
    </body>
</html>

我的脚本是：

$(document).ready(function() { 
    $("#widthPlus").click(function(){ 
        var currentwidth = $('#tree').attr('width'); 
        var currentwidthNum = parseFloat(currentwidth, 350); 
        var newwidth = currentwidthNum+5; 
        $('#tree').animate({'width', newwidth}, 5000); 
        return false;
    });
});

单击按钮my jsfiddle is here

时，我尝试增加（5px）图像宽度

Answer 1

$(document).ready(function() {
    $("#widthPlus").click(function() {

        $('#tree').animate({
            'width': '+=5'
        }, 5000);
        return false;
    });
});

jsFiddle

Answer 2

您有许多语法错误，也没有正确使用某些功能。我强烈建议使用parseFloat和jQuery animate等文档。使用Chrome的检查工具或Firefox的firebug，您将能够看到正在发生的明显的javascript错误并能够进行调试。

以下是您的代码的修改版本（您可以学习）：http://jsfiddle.net/XjaD5/5/

   $(document).ready(function() {
     $("#widthPlus").click(function(){
        var currentwidth = $('#tree').width();

        var newwidth = currentwidth+5;
         $('#tree').animate({'width': newwidth}, 5000);
        return false;
  });
   });

然而，Alex的版本是一个更好，更优雅的解决方案。

我的简单动画功能不起作用

2 个答案: