带有放大和缩小功能的 jQuery 动画 [关闭]答案

【问题标题】：jQuery Animation with Zoom In & Zoom Out [closed]带有放大和缩小功能的 jQuery 动画 [关闭]
【发布时间】：2015-08-09 19:41:36
【问题描述】：

我想在页面加载时自动使用 jQuery 为徽标制作动画。首先，图像需要缩小然后放大，然后它会变成不同的图像。我怎样才能用 jQuery 做到这一点？请帮我。这是我的代码：

$(document).ready(function() {
			
			$( "#minion" ).animate({
				height: '50%',
				width: '50%'
			}, 3000,
			function() {
				$( "#minion" ).animate({
					opacity: 0.5
				}, 1000,
				function() {
					$("#logo").html( $(".hiddendiv img, .hiddendiv div").clone() );
				});
			});

		});

.hiddendiv {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="logo">
  <img id="minion" src="images/logo.png" />
</div>
            <div class="hiddendiv">
                <img src='images/logo-small.png' />
                <div>complete transformation</div>
            </div>

谢谢

【问题讨论】：

我试过这样。 $(document).ready(function() { $("#logo img").animate({width: "50%", height: "50%"}, 'slow'); });
我也试过这个。但添加此代码后，图像未显示。 $("#logo img").toggle(function(){ $(this).animate({width: "50%"}, 'slow'); }, function(){ $(this).animate({宽度: "20%"}, '慢'); });
这可能会帮助你jsfiddle.net/d7UjD/9
@Krish 谢谢。但我看过这段代码。它仅适用于鼠标悬停和鼠标离开。我希望图像自动放大和缩小。
是的，我认为您需要根据自己的需要对这些进行整理jsfiddle.net/D7cn8

标签： jquery html css jquery-animate css-transitions

【解决方案1】：

你可以用这个小提琴 jsfiddle.net/d7UjD/9 做类似的事情

<img id="zoomimg" src="http://www.google.com/images/srpr/logo3w.png"
width="144" height="48" border="0" />
$(document).ready(function(){
  $('#zoomimg').css("cursor","pointer");
  $('#zoomimg').animate({width: "50%", height: "50%"}, 'slow');

  setTimeout(function() {
    $('#zoomimg').animate({width: "28%"}, 'slow');
  }, 1000 ); 
});

【讨论】：

谢谢。这在一定程度上帮助了我。