Question

我是JQuery的新手，正在学习它。

尝试为图像添加动画，如视频中所示（链接在下面）。

https://drive.google.com/open?id=1TORo-vTtCh5ezkbo9nfHKEqCdqXvh_kQ

这是我尝试过的代码。

图像动画有效，但是图像移动（隐藏）到角落而不是向上。

	$(document).ready(function(){
	  $(".btn1").click(function(){
		$.fn.myFunction1();
		$.fn.myFunction2();
	  });
	  $.fn.myFunction1 = function() {
		$("img").hide(3500);
	  }
	  $.fn.myFunction2 = function() {
		$("img").show(3500);
	  }
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<button class="btn1">Click Me</button>
	<br>
	<img src="http://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp2x.gif">

Answer 1

您需要使用jQuery UI来更改隐藏/显示的动画效果。

https://jqueryui.com/hide/

$(document).ready(function() {
  $(".btn1").click(function() {
    $("img").hide("blind", {}, 3500);
    $("img").show("blind", {}, 3500);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button class="btn1">Click Me</button>
<br>
<img src="http://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp2x.gif">

Answer 2

如果您正在寻找基本的上下滑动方式，则可以使用jquery完成。您可能遇到的问题是将隐藏/显示应用于图像。下面，我将slideToggle应用于包裹img标签的div。 SlideToggle自动在向下和向上状态之间切换。

$(document).ready(function(){
	  $(".btn1").click(function(){
		$("div").slideToggle(3500);
	  });
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<button class="btn1">Click Me</button>
	<br><div>
	<img src="http://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp2x.gif">

Answer 3

我看不到您的视频，但我想您想隐藏图像而不缩放。为此，您应将slideUp和slideDown用于这种动画。第二件事：即使您使用上述功能，img元素也会尝试保持其宽高比，因此您需要将该图像包装在例如div中，然后在该div上使用以上功能。

以下示例

	$(document).ready(function(){
	  $(".btn1").click(function(){
		$.fn.myFunction1();
		$.fn.myFunction2();
	  });
	  $.fn.myFunction1 = function() {
		$(".img-wrapper").slideUp(3500);
	  }
	  $.fn.myFunction2 = function() {
		$(".img-wrapper").slideDown(3500);
	  }
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">Click Me</button>
<br>
<div class="img-wrapper">
  <img src="http://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp2x.gif">
</div>

如果要在动画过程中缩放图像，只需在div和img元素中添加一些基本CSS（以全页打开预览）：

	$(document).ready(function(){
	  $(".btn1").click(function(){
		$.fn.myFunction1();
		$.fn.myFunction2();
	  });
	  $.fn.myFunction1 = function() {
		$(".img-wrapper").slideUp(3500);
	  }
	  $.fn.myFunction2 = function() {
		$(".img-wrapper").slideDown(3500);
	  }
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">Click Me</button>
<br>
<div class="img-wrapper" style="text-align:center;">
  <img  style="max-height:100%;height:auto;width:auto;display:inline-block;"  src="http://www.google.com/logos/doodles/2016/phoebe-snetsingers-85th-birthday-5179281716019200-hp2x.gif">
</div>

图像上下动画/显示和隐藏

3 个答案: