javascript 使用 jQuery 在单击时为图像大小设置动画

Animate an image size on click with jQuery

提问by Eduardo

Im trying to animate a large image so it changes dimensions, starts at (200x116)px and becomes (400x232)px on click and then would revert back to (200x116)px if clicked again,

我试图为大图像设置动画，以便它改变尺寸，从 (200x116)px 开始，点击时变为 (400x232)px，然后如果再次点击，将恢复为 (200x116)px，

Here's a link to the code: http://jsfiddle.net/edddotcom/FMfC4/1/

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

HTML:

HTML：

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

CSS:

CSS：

#imgtab {
    position:relative;
}

JavaScript:

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

Clicking the image should make it animate from small to large but it doesn't seem to change. Can anyone suggest what to change and tell me what i'm doing wrong?

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

回答by Manish Mishra

if you simply want to toggle on click, try below

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

 $(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">

OR

或者

you can also use the duration parameter of addClassand removeClassfunctions available in jQuery-ui widgetslibrary. i.e.

您还可以使用jQuery-ui 小部件库中可用的持续时间参数addClass和removeClass函数。IE

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

where .smalland .largecss classes are :

其中.small和.largecss 类是：

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

see this working fiddle.

看到这个工作小提琴。

NOTE:you will need reference of jQuery UI library also, cause duration parameter of addClassand removeClassis available there only.

注意：您需要的jQuery UI库的参考也，事业的持续时间参数addClass，并removeClass仅可在那里。

回答by prabeen giri

You are missing comma between object properties passed as a argument in animatemethod.

您在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/

例如：http: //jsfiddle.net/dFU9P/

回答by Julian Feliciano

Here is a simple way you can achieve your animation effect without having to use jQuery's animate and instead use CSS animations. I don't know what browsers you need to support, but it is still nice to see how it can be done in different ways.

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

HTML:

HTML：

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

CSS:

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:

jQuery：

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

And here is the fiddle http://jsfiddle.net/AtQwM/. Feel free to mess around with the transition parameters for different effects!

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

回答by Alex

Instead of placing the new image dimension in the code they could be data-attributes. http://jsfiddle.net/FMfC4/8/

它们可以是数据属性，而不是在代码中放置新的图像维度。 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();
});

回答by greener

Toggleoffers two states for one event but any animation using it ends up with display:none. You therefore need to use your own toggling mechanism using a variable to control the state of the image:

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/

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