jquery - jQuery幻灯片切换

基本上，我想要实现的是滑动切换效果，但效果不尽相同。

例如，我有一个设置为200px高度的div和一个带有嵌套img标签的锚点。当用户单击图像时，div将扩展到500px的高度并显示ul内的嵌套内容。

要关闭div，在右下角有一个关闭图标，它是包含背景图像的锚点。单击时，div将滑回到其先前的200px高度。

欢迎所有建议

这是我的HTML可以帮助您：

谢谢，

乔迪

最佳答案

使用jQuery：

var $getStarted = $('#getstarted');
$('#open img').click(function(){
  if($getStarted.hasClass('opened')) {
    $('#close').trigger('click');
  } else {
     $getStarted.animate({height:'+=300px'},500,function(){
      // you're open
        $getStarted.addClass('opened');
     });
  }
  return false;
});
$('#close').click(function(){
  if($getStarted.hasClass('opened')) {
    $getStarted.animate({height:'-=300px'},500,function() {
      // you're closed again
       $getStarted.removeClass('opened');
    });
  }
  return false;
});

这个怎么样？

此处的示例：http://jsfiddle.net/huF73/

谢谢，
我的直播

关于jquery - jQuery幻灯片切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7747442/

GetStarted

jquery - jQuery幻灯片切换