Question

如果你看一下图片，看看我的意思很简单，如果你再次点击它我也需要收缩，它也需要动画：

The image link http://www.keironlowecreative.x10hosting.com/Help.png

Answer 1

jquery的

$(document).ready(function(){        
   $("#what > img").click(function () {
      $("img").toggle("slow");
   });    
});

HTML

<div id="what">
  <img src="small_img" />
  <img src="big_img" style="display: none" />
</div>

toggle

Answer 2

您可以使用其中一个horizontal accordion插件。

Answer 3

请原谅内联样式...像素并不准确。使用相同的图像两次，一个div在另一个上面：

<div id="wrapper" style="position:relative; height:20px;">
  <div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
  <div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>

所以顶部div显示加号和左角。底部div显示右上角 - 超过两个像素，因此它不会显示在顶部元素的角落下方。如果图像不透明，这无关紧要......

为under div的宽度设置动画以获得效果。没有褪色，只有一个图像。应该小而且快速动画。

增加点击图像的大小

3 个答案: