Javascript 使用jQuery在单击时设置图像大小的动画

我正在尝试设置一个大图像的动画，使其改变尺寸，从（200x116）px开始，单击时变为（400x232）px，然后如果再次单击，将恢复为（200x116）px

以下是代码的链接：

HTML:

JavaScript:

$(document).ready(function () {
    $("#imgtab").toggle(function () { //fired the first time
        $("#imgtab").animate({
            width: "200px"
            height: "116px"
        });
    }, function () { // fired the second time 
        $("#imgtab").animate({
            width: "400px"
            height: "232px"
        });
    });
});

---

单击图像应该使其从小变大，但它似乎没有改变。有人能建议更改什么并告诉我做错了什么吗？

在

animate

方法中作为参数传递的对象属性之间缺少逗号

$(document).ready(function () {
    $("#imgtab").toggle(function () { //fired the first time
        $("#imgtab").animate({
            width: "200px",//HERE
            height: "116px"
        });
    }, function () { // fired the second time 
        $("#imgtab").animate({
            width: "400px",//HERE
            height: "232px"
        });
    });
});

---

例如：

如果您只想在单击上切换，请尝试以下操作

$（文档）.ready（函数（）{
var small={宽度：“200px”，高度：“116px”}；
var large={宽度：“400px”，高度：“232px”}；
var计数=1；
$（“#imgtab”）.css（小）.on（'click'，function（）{
$（此）.animate（（计数==1）？大：小）；
计数=1-计数；
});
});
切换
为一个事件提供两种状态，但任何使用该状态的动画最终显示为
display:none
。因此，您需要使用自己的切换机制，使用变量来控制图像的状态：

$(document).ready(function() {
    var imgSmall = false

    $('#imgtab').on('click',function() {
        $("#textab").toggle(20);
        if ( imgSmall ) {
            $('#imgtab').animate({width:"400px",height:"232px"});
            imgSmall = false
        } else {
            $('#imgtab').animate({width:"200px",height:"116px"});
            imgSmall = true
        }
    });
});

这里有一个简单的方法，您可以实现动画效果，而不必使用jQuery的动画，而是使用CSS动画。我不知道您需要支持哪些浏览器，但看到如何以不同的方式实现仍然很好

HTML:

jQuery：

$('#imgtab').on('click', function(e) {
    $(this).toggleClass('fullSize');
});

这是小提琴。您可以随意使用不同效果的过渡参数
 它们可以是数据属性，而不是在代码中放置新的图像维度。


（函数（$）{
$.fn.imageSizer=函数（）{
变量原始大小={
宽度：this.width（），
高度：this.height（）
};
this.on（'click'，function（）{
var newSize={
宽度：$（this）.data（'width'），
高度：$（此）.data（'height'））
};
var currentSize=（$（this.width（）==newSize.width）？originalSize:newSize；
$（此）.animate（当前大小）；
});    
}
})（jQuery）；
$（文档）.ready（函数（）{
$（“.imgtab”）.imageSizer（）；
});
OP的小提琴使用jQuery 1.9.1。您的示例使用的是1.6.4版本，在更高版本中的行为方式不同
.toggle（）
隐藏和显示元素。我没有意识到jquery是在1.9中，如果是这种情况，他需要有一个带有一些标志的“点击”事件，否则使用jquery migarte插件来实现与“toggle”相同的行为不确定我怎么会错过它！有没有一种方法可以更改它，使其与jQuery 1.9配合使用？这不是
.toggle（）
的工作方式。至少在较新版本的jQuery中没有。
$(document).ready(function() {
    var imgSmall = false

    $('#imgtab').on('click',function() {
        $("#textab").toggle(20);
        if ( imgSmall ) {
            $('#imgtab').animate({width:"400px",height:"232px"});
            imgSmall = false
        } else {
            $('#imgtab').animate({width:"200px",height:"116px"});
            imgSmall = true
        }
    });
});

<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">

img {
    height: 200px;
    width: 116px;
    -webkit-transition: all .4s ease-in; //added vendor prefixes for older browsers
    -moz-transition: all .4s ease-in; //first parameter decides what properties to animate
    -m-transition: all .4s ease-in; // second is duration
    -o-transition: all .4s ease-in; //3rd is the timing-function
       transition: all .4s ease-in;
}

.fullSize {
    height: 400px;
    width: 232px;
}

$('#imgtab').on('click', function(e) {
    $(this).toggleClass('fullSize');
});

<img class="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg" data-width="400" data-height="200">

(function($) {
$.fn.imageSizer = function() {

    var originalSize = {
        width: this.width(),
        height: this.height()
    };

    this.on('click', function() {
        var newSize = {
            width: $(this).data('width'),
            height: $(this).data('height')
        };

        var currentSize = ($(this).width() == newSize.width) ? originalSize : newSize;

        $(this).animate(currentSize);
    });    
}
})(jQuery);

$(document).ready(function() {
    $(".imgtab").imageSizer();
});