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