0

解決策を読んだり提供したりしてくれた人に感謝します。

私は現在、ポートフォリオ サイトを再構築していますが、サイトを壊すほどではない小さな問題に遭遇しましたが、適切に構築されていないと、目には不快です。

問題: ユーザーがプロジェクトをクリックすると、説明が非表示から下にスライドします。ユーザーが同じ行の別のプロジェクトをクリックすると、基本的に現在のプロジェクトを閉じようとし、新しいプロジェクトをすばやく開きます。0.5 秒間、プロジェクトが非表示になり始めてから再び展開し、興味深い「バウンス」のような効果を生み出します。

理想的には、高さを変更せずに、同じ行のプロジェクトを表示するだけです。

コード: 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

4

2 に答える 2

0

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 が豚のように実行されます。

于 2013-09-13T15:02:17.493 に答える