jQuery - 幻灯片将打开但不会关闭

Question

我有一个 jQuery 代码，当用户点击 <h2> 时title 它打开一个 div里面有它的内容。

HTML代码:

<div class="content1">
    <h2 class="vertical"> open text box</h2>
</div>
<div class="content1-text" >
        Text box
   <div id="back1" style="float:right;">HOME</div>
</div>

CSS 代码:

.content1-text {
   padding: 20px;
   width: 920px;
   min-height: 560px;
   height: auto;
   background: #61752d;
   margin: 0;
   position: absolute;
   display: none;
}

jQuery 代码:

$('.content1').click(function () {
    if($('.content1').is(':visible')){
            $('.content1-text').toggle('slide', {
                direction: 'left'
            }, 1000);
    }
    else{
        $('#back1').toggle('slide', {
            direction: 'left'
        }, 1000, function(){ $('#content1-text').fadeIn();});
    }
});

现在的问题是，当用户点击打开文本框时，它会打开文本框，但是当用户点击HOME时，它不会滑回，因为这是在开始...

我试图让它从左向右滑动。当它从右向左关闭时。

我试图在网上找到它，但没有找到。

我的 JsFiddle here

Answer 1

我认为您真的需要复习 toogle 方法 http://api.jquery.com/toggle/

你可以这样做:

$('.content1').click(function () {
    $('.content1-text').toggle("slow");
});
$('#back1').click(function () {
    $('.content1-text').toggle("slow");
});

查看演示 http://jsfiddle.net/PBm88/11/

编辑

在预期结果的更多细节之后，您可以根据 classname 执行一个函数，为相关容器启用幻灯片动画:

$('.vertical').click(function () {
  var id=$(this).parent().attr('class'),
      slid='.'+id+'-text';
  $(slid).show().animate({
      width:'920px',
      opacity: '1'
  },2000)
});
$('.back').click(function () {
    $(this).parent().animate({
      width:'0px',
      opacity: '0'
    }, 
    {duration:2000,
     complete: function() {
         $( this ).hide();
        }
     });
});

新演示 http://jsfiddle.net/PBm88/59/