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

OR

您还可以使用 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;
}

请参阅此工作fiddle。

注意：您还需要引用jQuery UI库，因为addClass和removeClass的持续时间参数仅在那里可用。

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

使用jQuery单击动画图像大小

5 个答案: