Question

我正在为我的网页开发课程做最后的决定，我正在努力建立一个博客主题网站。我想制作我的代码，以便有一张个人资料图片，当点击它时会变成一个框并显示一个生物和其他信息。我已经完成了那部分，但现在我想做到这一点，当再次点击个人资料图片时，它将使框和信息消失。我知道有一些方法，我尝试了一些但没有成功。当我尝试.toggle时，它就完全消失了。任何建议都会有所帮助，谢谢

（JSfiddle不适合我，抱歉）＆gt; 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

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

使用CSS转换并使用：checked伪类。这样您还可以轻松设置初始状态。

完全正常工作的演示：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>

Answer 2

这就是我的建议：

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

我很乐意给你实际代码，但既然是你的决赛，这应该会给你一个很好的起点:)祝你好运！

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

尝试在px，css使用js单位值;检查display $("#info") click #picback的{{1}}属性是否已淡入，淡出#info;将#picback css重置为初始borderRadius，height

＆＃13;

$(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');
    }
  });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 6

这是一个非常简单的解决方案的例子。发布的其他示例已经有点性感，但我只是使用变量来检查它是否打开或关闭。我还添加了基本的关闭动画，但是你想要摆弄它以使它不可怕。例如，我建议在动画函数之后重置回调中的边框半径，以防止这种丑陋的椭圆效果。

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

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

$(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');

    }
  });
});

如何切换.click更容易？

7 个答案: