Анимировать размер изображения при щелчке с помощью jQuery

Question

Im пытается анимировать большое изображение, чтобы оно меняло размеры, начинается с (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">

ИЛИ

вы также можете использовать параметр длительности от addClass и removeClass функции доступны в jQuery-ui widgets библиотека. т.е.

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

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 4

Вот простой путь вы можете добиться эффекта анимации без использования одушевленного 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 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(); 
});