jquery - 使用 2 次不同的点击来反转 jquery 动画？

Question

我正在尝试扩展一个 div (#square)，然后让一些文本 (.squarecontent) 淡入。此外，我希望在 #square 中出现一个链接来反转动画和淡入淡出。jfiddle在这里

$(document).ready(function(){

$('.squarecontent').hide();

$('#square').click(function() {
$('#square').animate({
width: '100%',
height: '100%'
  },
  1000,
  function() {
      $('.squarecontent').fadeIn(1000);
  });
});
$('#bottomright').click(function() {
      $('.squarecontent').fadeOut(1000);
},
function () {
  $('#square').animate({
      width: '300px',
      height: '300px'
  },
  1000)
});
});

Answer 1

您可以通过添加 Opened 标志并使用e.StopPropagation()来阻止关闭事件在冒泡 DOM 时触发打开事件来实现此目的。

看这个演示

注意：由于缺少源，我将您的图像更改为链接。

Answer 2

你不能这样做。#bottomright是一部分#square所以点击#bottomright你也点击#square。

在这种情况下，两种方法（隐藏和显示）都会被触发。

解决方案：

我在这里看到两种方式。您可以将此 img 移到外部#square或添加一个链接/按钮来切换您的动画。

---

从 jQuery 看这个例子：http: //jsfiddle.net/27uVs/

更多关于toggle()您的信息可以在这里找到。