Question

我不是最好的java。我有一些jQuery动画，在页面加载时会超时。最后一个（到目前为止）是一个隐藏的div滑出来。在其中嵌套了另一个div，用于单击关闭然后部分隐藏div。我想在这一点上能够点击同一个关闭它的div来打开或关闭我想要的。你可以看到我到目前为止所拥有的东西。 http://www.gregtaylordesignstudio.com/Great-Lakes-Project/actions.html

我正在使用的jquery是

$(document).ready(function(){
                var slideout = $('#actionsBlurb');
                $('#dots').hide();
                $('#mapBack').delay(1000).animate({top:"45px"},800).fadeOut(400);
                $('#mapBackTop').delay(1000).fadeOut(1000);
                slideout.delay(4000).animate({ right: 75, }, { duration: 1000, easing: 'easeOutExpo'});                                                  

                $(".close").click(function () {
        slideout.animate({ right: '75px'}, { queue: false, duration: 500}); }, function () {       
        slideout.animate({ right: '-475px'}, { queue: false, duration: 500 });
    });
        });

我的css

#actionsBlurb {
    width:50%;
    padding:20px;
    position:absolute;
    top:0;
    right:-525px;
    background: rgb(255, 255, 255) transparent;
    background: rgba(255, 255, 255, 0.8);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);    
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)";
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 6px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
    border:#036 solid 4px;
    z-index:200;
}
.close{
    width:40px;
    height:40px;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    bottom: -40px;
    left: -20px;
    z-index:300;
}

#topSection {
    width:900px;
    height:749px;
    position:relative;
    margin: 0 auto;
    overflow:hidden;
    }

Answer 1

给这样的东西一枪......

var open = true;
$(".close").click(function () {
    if(open === false) {
        open = true;
        slideout.animate({ right: '-475px'}, { queue: false, duration: 500 });
    } else if(open === true) {
        open = false;
        slideout.animate({ right: '75px'}, { queue: false, duration: 500});
    }
});

'open'变量将为我们提供一种方法来了解我们的幻灯片是否隐藏。因此，为click事件提供了一种了解它应如何为幻灯片设置动画的方法。它最初设置为真正意义上的滑出开始对用户可见。我不确定你的哪些动画滑出而不是滑入，所以你可能需要根据现有的逻辑来切换它们。但我希望这可以让你了解目标和尝试的目标。

初始幻灯片动画后如何滑入和滑出Div？

1 个答案: