0

タグ内に画像があり、画面の中央に配置された div もあります。

画像がクリックされるまで、この div を非表示にするにはどうすればよいですか?

div が表示されているときのページのプレビュー:http://i.stack.imgur.com/P8XZe.jpg

カートに追加されたのは、画面の中央にある div です。「カートに入れる」ボタンがクリックされたときにのみ表示されるようにします。

2 秒後に div が再び消えるようにします。トランジション (可視性へのフェードなど) があればいいのですが、私は気にしません。

4

3 に答える 3

0

CSS

.hide{
display:none;
}

html

<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>

js

$(function(){
 $('.hide-show').bind('click',function(){
    $('.hide').fadeIn(500).delay(2000).fadeOut(500);

    });
});
于 2012-11-15T11:43:31.403 に答える
0

div の表示を none に設定し、画像に対して onclick イベントを実行して、div の表示をブロックに設定します。JQuery を使用してトランジションやアニメーションを追加することをお勧めします。

次のようなもの (アニメーションなし):

<div id="cart" style="display:none">

</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
于 2012-11-15T05:58:45.767 に答える
0

それを解決しました。jQueryを使用する必要がありました。

< head> で:

<script>
$(document).ready(function(){
  $(".addtocart").click(function(){
    $(".addedcartbg").fadeIn(500);
    $(".addedcartbg").delay(1000);
    $(".addedcartbg").fadeOut(500);
  });
});
</script>

<body> 内:

<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
于 2012-11-15T11:37:32.417 に答える