1

クリックすると画像の上にテキストが表示される透明なオーバーレイを作成しようとしています。アニメーションを実行するためにそれを取得しましたが、トップダウンではなくボトムアップから移動する必要があります.

HTML
=======

    <!-- Element -->

    <div class="char">
    <div class="content">
      <p id="nesstxt">ness is the bess</p>
      <img id="ness" src="http://images3.wikia.nocookie.net/__cb20120802002608/ssb/images/2/25/Ness(Clear).png" />
      <div id="nessoverlay"></div>
    </div>

    <div class="content">
      <p id="pootxt">poo is my doo</p>
      <img id="poo" width="215px" height="369px" src="http://images4.wikia.nocookie.net/__cb20081118173625/earthbound/images/4/4b/Poo_Clay.png" />
      <div id="poooverlay"></div>
    </div>
    </div>

CSS
=======



    div.char{
        max-width:50%;
        margin: 0 auto;
      padding:0;
    }

    /*styling for effective overlay*/

    #nessoverlay,  #poooverlay"{
      height: 100%;
      background-color: black;
      opacity: 0.7;
      filter: alpha(opacity = 70);
      position: absolute;
      bottom: 0; left: 0; right: 0;
      display: none;
      z-index: 2; 
    }

    /*box that holds it together*/

    .content{
      width:215px;
      height:369px;
      position:relative;
      z-index:1;
      display:inline;
      padding:25px;
    }

    /*center txt and animate*/

    #nesstxt,  #pootxt{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 70%;
      color: white;
      display: none;
      z-index: 3;
    }

jQuery
=======
    $(document).ready(function (){
      $('#nessoverlay, #nesstxt, #ness').click(function (){
        $('#nessoverlay, #nesstxt').slideToggle();
      });
    });

    $(document).ready(function (){
      $('#poo,  #poooverlay, #pootxt').click(function (){
        $('#poooverlay, #pootxt').slideToggle();
      });
    });

更新されたコードペン

また、オーバーレイ インラインの画像が約 4 枚必要ですが、これを機能させる方法がわかりません。どんな助けでも大歓迎です。

4

3 に答える 3

0

このように試して、JavaScript コードを次のように変更します。

$(document).ready(function (){
  $('#overlay, #txt, #ness').click(function (){
    $('#overlay, #txt').slideToggle();
  });
});

#txtcss を追加して変更しbottom: 0;ます。

#overlaycssから削除しtop: 0;て設定するheight: 100%; width: 100%;

CSS

/*styling for effective overlay*/

div#overlay{
  height: 100%;
  background-color: black;
  opacity: 0.7;
  filter: alpha(opacity = 70);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: none;
  z-index: 2; 
}

/*box that holds it together*/

.content{
  width:215px;
  height:369px;
  position:relative;
  z-index:1;
  margin: 0 auto;
}

/*center txt and animate*/

#txt{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  color: white;
  display: none;
  z-index: 3;
}

コードはこちら

を追加して、必要な場所に表示することもできbottom: 320px;ます#txt。

于 2013-08-02T04:35:02.497 に答える
0

これをチェックしてください：http://codepen.io/anon/pen/EmauB

オーバーレイとコンテンツに別のレイアウトを使用しました。

たとえば、4つの画像を使用しました。

HTML コード

<h1>jQuery Reverse Animation</h1>
<ul>
    <li>
        <img src='1.jpg' width='150px' height='300px' />
        <div>
            <p>Image 1</p>
        </div>
    </li>
    <li>
        <img src='2.jpg' width='150px' height='300px' />
        <div>
            <p>Image 2</p>
        </div>
    </li>
    <li>
        <img src='3.jpg' width='150px' height='300px' />
        <div>
            <p>Image 3</p>
        </div>
    </li>
    <li>
        <img src='4.jpg' width='150px' height='300px' />
        <div>
            <p>Image 4</p>
        </div>
    </li>
</ul>

CSS コード

* {
    padding : 0;
    margin : 0;
}
body {
    width : 630px;
    margin : auto;
}
h1 {
    text-align : center;
    padding : 10px;
}
li {
    list-style-type : none;
    float : left;
    width : 150px;
    height : 300px;
    overflow : hidden;
    position : relative;
    margin-right : 10px;
}
li:last-child {
    margin-right : 0;
}
li div {
    position : absolute;
    top : 100%;
    bottom : 0;
    background-color : rgba(0, 0, 0, 0.5);
    width : 100%;
}
li div p {
    padding : 10px;
    color : #fff;
    text-align : center;
}

JavaScript コード

$(function() {
    $('li div, li img').click(function() {
        var div = $(this).closest('li').find('div');
        if($(div).data('open') == 'true') {
            $(div).animate({top : "100%"});
            $(div).data('open', 'false');
        } else {
            $(div).animate({top : 0});
            $(div).data('open', 'true');
        }
    });
});

必要に応じてクラス/ID 名を変更します。

変更が必要な場合はお知らせください。

于 2013-08-02T05:39:48.633 に答える
0

jquery UI を使用できます: http://api.jqueryui.com/slide-effect/

このように、方向も指定できます。

于 2013-08-02T04:38:35.660 に答える