0

所以我有一个标签内的图像，我还有一个位于屏幕中间的 div。

在单击图像之前，如何使此 div 不可见？

div 可见时的页面预览：http://i.stack.imgur.com/P8XZe.jpg

所以添加到购物车的是屏幕中间的一个 div。我希望仅在单击“添加到购物车”按钮时显示。

我希望 div 在 2 秒后再次消失。过渡会很好（例如淡入可见），但我不介意。

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 回答