需要 Jquery 的帮助点击个人资料并显示简历内容

Question

谁能帮帮我？我很难弄清楚如何实现一个脚本，当您单击任何个人资料图片时，它会显示一个 bios，有点像这样：https://vestar.com/company/leadership/ I only need at least one example script in jquery and from there i will handle the rest. Currently this is what i came up using a different script from from google search: http://derek.phgserver1.com/leadership/ I also need the feature that when you hover over the image and click that it will toggle just like what https://vestar.com/company/leadership/ 对他们的网站做了。我希望这里有人可以帮助我。谢谢

Answer 1

FadeToggle 可以完成您的工作

$(document).ready(function(){
   $("button").click(function(){     
      var id = this.id;
      $(".bio").not("#"+id+"div").hide();
      $("#"+id+"div").fadeToggle(); 
   });
  $(document).on("click", function (e) {
    if (!$(e.target).is("button")) {
         $(".bio").fadeOut();
    } 
  });
});

button{
  width:50%;
  float:left;
}
div{
  width:100%;
  height:100px;
  background-color:lightgrey;
 display:none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <button id="first">First</button>
  <button id="second">Second</button>
  <br><br><br>
  <div id="firstdiv" class="bio">Hello First World Bio</div>
  <div id="seconddiv" class="bio">Hello Second World Bio</div>
</body>

灰度到彩色的另一个问题将通过简单的方式完成 css 属性 filter.
编辑 2： 添加了新功能图像将转换为 rgb，直到用户单击文档中的任意位置。

$(document).on("click", function (e) {
 if (!$(e.target).is("img")) {
   $("img").css("filter","grayscale(100%)");
 } 
});
$("img").hover(function(){
  $(this).css("filter","grayscale(0%)");
});

img {
  filter: gray; /* IE6-9 */
  filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  transition-duration:0.2s;
  width:100px;
  height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="yourpiclink.png" />

只需在 img 标签中添加图片 link

Answer 2

我认为你实现了第一个。

第二个你可以使用

$("your picture selector").hover(function(){   $("your picture selector").animate({
filter: grayscale(100%); }); });

反之亦然

$("your picture selector").hover(function(){   $("your picture selector").animate({
filter : grayscale(0%) }); });

您可以使用本教程：

jQuery Effects - Animation 要么 CSS filter Property

需要 Jquery 的帮助点击个人资料并显示简历内容

Need help for Jquery click on profile and show Bio content

jquery

image

toggle

jquery-hover