javascript - jquery 尝试滑动一个已经打开的 div，创建一个 'bounce' 效果

Question

提前感谢任何阅读/提供解决方案的人。

我目前正在重建我的投资组合网站，但遇到了一个小问题，虽然没有破坏网站，但如果没有正确构建，就会让人不悦。

问题:当用户点击元素时，描述从隐藏状态滑落。当用户点击同一行的另一个元素时，它基本上会尝试关闭当前元素，然后快速打开新元素，半秒钟后，元素开始隐藏，然后再次展开，创造出​​一种有趣的“弹跳”效果。

理想情况下，我希望同一行上的任何元素都能显示，而不会在任何时候改变高度。

代码:HTML

<section class="personal">
<header class="header">
 <nav class="nav">
  <ul class="nav-bar">
   <li><a class="p" href="#">p</a></li>
   <li><a href="mailto:im@pbj.me" data-icon="a"></a></li>
   <li><a href="http://www.github.com/patrickbjohnson" target="_blank" data-icon="g"></a>     </li>
   <li><a href="http://www.twitter.com/patrickbjohnson" target="_blank" data-icon="t"></a></li>
  </ul>
 </nav>
</header>
<h1>Johnathan Doesmith</h1>
<h2>Cras Purus Quam</h2>
<h3>Cras purus</h3>
</section>

<section class="work">
<ul>
<li class="project">
 <img src="img/image1.jpg">
 <a href="#">Project Name</a>
 <div class="description">
  <h1>Project Name 1</h1>
  <h2>Project website</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
  <button>visit site</button>
 </div>
</li>
<li class="project">
 <img src="img/image1.jpg">
 <a href="#">Project Name</a>
 <div class="description">
  <h1>Project Name 1</h1>
  <h2>Project website</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
  <button>visit site</button>
 </div>
</li>
<li class="project">
 <img src="img/image1.jpg">
 <a href="#">Project Name</a>
 <div class="description">
  <h1>Project Name 1</h1>
  <h2>Project website</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
  <button>visit site</button>
 </div>
</li>
<li class="project">
 <img src="img/image1.jpg">
 <a href="#">Project Name</a>
 <div class="description">
  <h1>Project Name 1</h1>
  <h2>Project website</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
  <button>visit site</button>
 </div>
</li>
</ul>
</section>

jQuery:

$('.project > a').click(function(event){

    // variables
    var $this = $(this);
    var $project = $('.project');
    var $target = $project.filter($this.parent());

    // stop link jump from happening
    event.preventDefault();
    // $target.addClass('open') *****

    // removes 'open' class from all elements except
    // for the parent ('li') of the clicked element
    $('.open').not($target).removeClass('open');


    if ($target.hasClass('open')) {
        // if the target has the class, remove it. 
        $target.removeClass('open');
        // what is 'return false supposed to do in this instance?'
        return false;
    } else {
        // if the target doesn't have the class, then add it. 
        $target.addClass('open');
        return false;
    }
});

网站也在这里:http://www.pbj.me/dev/pbj/v3

Answer 1

Jquery:使用淡入代替反弹。

在父 div 上设置高度，然后在子 div 上设置 .fadeIn(1000)。动态地，当每个被点击时。

<style>
div.parent{height:50px; width:100%;}
div.child{height:100%; width:100%;}
</style>
<div class='parent'>
  <div class='child'>Project Information</div>
</div>

<script>
  $(".child").css("display", "none");
  $(".child").fadeIn(1000);
</script>

现在您需要做的就是在您的点击事件中设置脚本位

不要忘记将所有脚本包装在 ...

$(document).ready(function() {

});

Ps，你的图片太大了，缩小它们并为网络优化它们。否则这会严重影响您的页面加载时间并使 javascript 像 pig 一样运行。