2

我试图为一个大图像制作动画，以便它改变尺寸，从 (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"
        });
    });
});

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

4

5 回答 5

6

如果您只是想在点击时切换，请在下面尝试

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

其中.small和.largecss 类是：

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

看到这个工作小提琴。

注意：您还需要参考 jQuery UI 库，导致持续时间参数addClass和removeClass仅在此处可用。

于 2013-04-19T18:22:46.197 回答
3

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

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

于 2013-04-19T18:14:35.037 回答
2

这是一种无需使用 jQuery 的 animate 而是使用 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/。随意摆弄不同效果的过渡参数！

于 2013-04-19T18:37:17.773 回答
0

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/

于 2013-04-19T18:28:18.460 回答
0

它们可以是数据属性，而不是在代码中放置新的图像维度。 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();
});
于 2013-04-19T19:14:09.800 回答