如何更轻松地切换 .click？

Question

我正在为我的网页开发准备期末考试 class，我正在尝试制作一个以博客为主题的网站。我想制作我的代码，以便有一张个人资料图片，当单击它时它会变成一个框并显示个人简介和其他一些信息。我已经完成了那部分，但现在我想做的是，当再次单击个人资料图片时，它会使框和信息消失。我知道有很多方法，我已经尝试了一些但没有成功。当我尝试 .toggle 时，它完全消失了。任何建议都会有所帮助，谢谢

（JSfiddle 不适合我，抱歉）> CodePen

JavaScript:

$(document).ready(function() {
  $('#picback').click(function() {
    $('#picback').animate({
      borderTopLeftRadius: 100,
      borderTopRightRadius: 100,
      borderBottomLeftRadius: 2,
      borderBottomRightRadius: 2,
      height: 460
    }, 'slow');
    $('#info').fadeIn('slow');
  });
});

Answer 1

试试这个代码。它在动画时添加一个 class，然后在动画之前检查它。

$(document).ready(function() {
  $('#picback').click(function() {
    var $this = $(this);
    if($this.hasClass('animated')) {
      $this.removeAttr('style').removeClass('animated');
    } else {
      $this.animate({
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        height: 460
      }, 'slow').addClass('animated');
      $('#info').fadeIn('slow');

    }
  });
});

Answer 2

这是我推荐的：

单击时不执行 jQuery 中的动画，而是在单击时为图片元素提供活动的 class。
仅当图片具有活动 class 时才使用 CSS 执行动画。
如果您单击图片元素并且它存在，请删除 class。

我很乐意为您提供实际代码，但由于它是为了您的期末考试，所以这应该会给您一个良好的起点 :) 祝您好运！

Answer 3

您应该使用 .toggleClass() 来点击图像并直接在 css 中控制 bio 的状态（例如折叠和展开）。

Answer 4

你在这里可以做的是使用一个能记住其状态的闭包函数：

var clickHandler = (function () {
    var isOpen = false;
    return function () {
        isOpen = !isOpen; // Toggles between true and false
        if (isOpen) {
            $('#picback').animate({
                borderTopLeftRadius: 100,
                borderTopRightRadius: 100,
                borderBottomLeftRadius: 2,
                borderBottomRightRadius: 2,
                height: 460
            }, 'slow');
            $('#info').fadeIn('slow');
        } else {
            // Add close animation here
        }
    };
})();

$('#picback').click(clickHandler);

Answer 5

尝试在 css 和 js 处使用 px 单位值；在 #picback 的 click 处检查 $("#info") 的 display 属性淡入，淡出 #info ；重置 #picback css 回到初始 borderRadius , height

$(document).ready(function() {
  var picback = $("#picback")
  , info = $("#info");
  picback.click(function() {
    if (info.css("display") === "none") {
      $(this).animate({
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        height: 460
      }, 'slow');
      info.fadeIn('slow');
    } else {
      $(this).animate({borderRadius:120,height:230}, 'slow');
      info.fadeOut('slow');
    }
  });
});

a {
  text-decoration: none;
  color: black;
  text-align: center;
}
#picback {
  background-color: #B8B8B8;
  border-radius: 120px;
  width: 230px;
  height: 230px;
  border: 2px solid white;
  margin: 0 auto;
  box-shadow: 0 0 5px;
}
#picback:hover {
  box-shadow: 0px 0px 8px black;
}
#profilepic {
  height: 200px;
  position: relative;
  top: 15px;
  left: 5px;
}
#name {
  font-family: 'Playball', cursive;
  color: blue;
  text-shadow: 0 0 3px white;
}
#age {
  font-family: 'Pragati Narrow', sans-serif;
  font-size: 25px;
}
#bio {
  font-family: 'Roboto', sans-serif;
  color: white;
}
#info {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href='#'>
  <div id='picback'>
    <img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic'>
    <div id='info'>
      <h2 id='name'>Joshua T. Hurlburt</h2>
      <h2 id='age'>15</h2>
      <p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
    </div>
  </div>
</a>

代码笔http://codepen.io/anon/pen/zGKepE

Answer 6

这是一个非常简单的解决方案示例。已经发布的其他示例有点性感，但我只是使用一个变量来检查它是打开还是关闭。我还添加了基本的关闭动画，但您需要 fiddle 以使其不那么糟糕。例如，我建议在动画函数之后的回调中重置边框半径，以防止出现丑陋的椭圆形效果。

$(document).ready(function() {
  var dropped = false;
  $('#picback').click(function() {
    if (!dropped) {
      $('#picback').animate({
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        borderBottomLeftRadius: 2,
        borderBottomRightRadius: 2,
        height: 460
      }, 'slow');
      $('#info').fadeIn('slow');
      dropped = true;
    } else { // Closing animation
      $('#picback').animate({
        borderRadius: "50%",
        height: "230px"
      }, 'slow');
      $('#info').fadeOut('slow');
      dropped = false;
    }
  });
});

http://codepen.io/anon/pen/dopaJq

Answer 7

我们在 2015 年。Javascript 或 jQuery 不需要 这里！

使用 CSS 转换并使用 :checked 伪 class。这样你也可以很容易地设置一个初始状态。

完整的演示：http://codepen.io/anon/pen/mJrvXo

#visibleToggle {
  display: none;
}
#picback {
  background-color: #B8B8B8;
  border-radius: 50%;
  width: 230px;
  height: 230px;
  border: 2px solid white;
  margin: 0 auto;
  box-shadow: 0 0 5px;
  text-align: center;
  transition-duration: 0.6s;
}
#picback:hover {
  box-shadow: 0px 0px 8px black;
  cursor: pointer;
}
#profilepic {
  height: 200px;
  position: relative;
  top: 16px;
  left: 2px;
}
#profilepic:hover {
  cursor: pointer;
}
#name {
  font-family: 'Playball', cursive;
  color: blue;
  text-shadow: 0 0 3px white;
}
#age {
  font-family: 'Pragati Narrow', sans-serif;
  font-size: 25px;
}
#bio {
  font-family: 'Roboto', sans-serif;
  color: white;
}
#info {
  opacity: 0;
}
#visibleToggle:checked + #picback {
  border-radius: 120px 120px 2px 2px;
  height: 460px;
}
#visibleToggle:checked + #picback #info {
  opacity: 1;
}

<input type="checkbox" id="visibleToggle" />
<div id='picback'>
  <label for="visibleToggle">
    <img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic' />
  </label>
  <div id='info'>
    <h2 id='name'>Joshua T. Hurlburt</h2>
    <h2 id='age'>15</h2>
    <p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
  </div>
</div>

如何更轻松地切换 .click？

How to toggle a .click easier?

javascript

jquery

html

css

jquery-animate