使用jQuery单击动画图像大小

Question

我试图动画一个大图像，以便它改变尺寸，从（200x116）px开始，并在点击时变为（400x232）px然后如果再次点击，将恢复为（200x116）px，

这是代码的链接： http ： //jsfiddle.net/edddotcom/FMfC4/1/

HTML：

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

CSS：

#imgtab {
    position:relative;
}

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"
        });
    });
});

单击图像应该使其从小到大动画，但它似乎没有变化。 任何人都可以建议改变什么，并告诉我我做错了什么？

Answer 1

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

  $(document).ready(function () { var small={width: "200px",height: "116px"}; var large={width: "400px",height: "232px"}; var count=1; $("#imgtab").css(small).on('click',function () { $(this).animate((count==1)?large:small); count = 1-count; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="imgtab" class='small' src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> 

要么

您还可以使用jQuery-ui小部件库中可用的addClass和removeClass函数的duration参数。 即

$(document).ready(function () {
    var count=1; 
    $("#imgtab").on('click', function () {
        var $this = $(this);
        $this.removeClass('small, large',400);
        $this.addClass((count==1)?'large':'small',400);
        count = 1-count;
    })
});

其中.small和.large css类是：

.small{
    width:200px;
    height:116px;
}
.large{
    width:400px;
    height:232px;
}

看到这个工作小提琴 。

注意：您还需要引用jQuery UI库，导致addClass和removeClass duration参数仅在那里可用。

Answer 2

您在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"
        });
    });
});

EG： http ： //jsfiddle.net/dFU9P/

Answer 3

这是一种简单的方法，您可以实现动画效果，而无需使用jQuery的动画，而是使用CSS动画。 我不知道您需要支持哪些浏览器，但仍然很高兴看到它可以以不同的方式完成。

HTML：

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

CSS：

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

jQuery的：

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

这里是小提琴http://jsfiddle.net/AtQwM/ 。 随意混淆不同效果的过渡参数！

Answer 4

Toggle为一个事件提供两种状态，但使用它的任何动画都以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
        }
    });
});

http://jsfiddle.net/FMfC4/3/

Answer 5

而不是将新图像维度放在代码中，它们可以是数据属性。 http://jsfiddle.net/FMfC4/8/

<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();
});