Question

我有一个jQuery代码，当用户点击<h2>标题时，它会打开一个内容为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/

Answer 2

http://jsfiddle.net/PBm88/13/

请改用此jQuery：

$(document).ready(function() {
        $('#button, #back1').click(function() {
            $('#box').toggleClass('visible');
        });
    });

CSS：

.visible { display: block; }

还使用三个ID修改了HTML。

在CSS中做任何动画。根据需要进行修改。

Answer 3

您没有主页按钮的点击处理程序

尝试

$('.content1').click(function () {
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
});

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

演示：Fiddle

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

3 个答案: