0

状況、私は 3 つのブロック要素を持っています。順番に：

-> 画像

-> 非表示のテキスト ブロック (.hidden)

-> フッターブロック (.blockimage)

読み込み時に、画像は .hidden (基本的に詳細情報) の上にオーバーレイされ、次にヘッダー用の小さなブロックがオーバーレイされます。マウス クリックで .blockimage .hidden を画像の上にスライドさせます。

注: 私は既に .hidden 要素を position:absolute として設定しており、インライン スタイルの display:none も持っています。.hidden を調べて、display:none のチェックを外すと。完璧に見えますが、クリック呼び出しでアニメーション化できないようです。

これは私がこれまで行ってきたことです....

$('.blockimage').click(function() {
  $('.blockimage .hidden').slideUp('fast', function() {
    // remove display:none; of inline css on .hidden and slide content up. (Class already has a)
  });
});

回転を除くと、次のように上にスライドします = http://css-tricks.com/examples/SlideupBoxes/

どんな助けでも素晴らしいでしょう:)

4

2 に答える 2

1

divを使用して画像と情報の両方を保持しoverflow: hidden、クリックすると位置をアニメーション化します。ここにデモがあります。

HTML

<div class="container">
    <img src="{yourimage}" />
    <div class="info-block">
     {information}
    </div>
</div>

CSS

これを機能させるために必要な CSS は次のとおりです。

.container {

  position: relative;
  overflow: hidden;

}

.info-block {

  position: absolute;
  bottom: -xx; // element height, or more

}

Javascript

jQuery(document).ready(function(){

  $('img').click(function(){

    $(this).siblings('.info-block').animate({
      bottom: '0'}, 'fast');

  });

});

更新: 初期状態に戻る (jQuery または CSS3 Transition のみ)

初期状態に戻したい場合は、次のbottomように、javascript でプロパティをチェックすることで、私が提供したコードを拡張できます。

if( $(this).siblings('.info-block').css('bottom') !== '0px' )
    $(this).siblings('.info-block').animate({bottom: 0}, 'fast');
else
    $(this).siblings('.info-block').animate({bottom: '-{some-other-height}'}, 'fast');

動作デモを確認できます。

ただし、この場合、よりクリーンで軽量なコードにするために、おそらくCSS3 transitionを使用します。もちろん、元に戻したくない場合でもトランジションを使用できますが、その場合は、クイック jQuery の方が高速であることがわかりました。

解決策 2: CSS3 トランジション

CSS3 Transition を使用する場合は、次のように別のクラスを定義します。

.info-block.shown {

    bottom: 0;

}

次に、クリック時に jQuery を使用してクラスを切り替えます。

$('img').click(function(){

      $(this).siblings('.info-block').toggleClass('shown');

});

作業デモはこちら。

于 2013-03-01T13:06:44.200 に答える
0

を試してみて$('.hidden').slideUpください。現在のセレクターは、すべての要素を両方のクラスと一致させようとしています。

さらに、選択した要素を非表示にします。代わりに使用してみてslideUp くださいshow。

于 2013-03-01T12:53:50.147 に答える