javascript - jQuery - 2 级 slider 通过单击返回到 1 级

Question

我修改了这个jsFiddle http://jsfiddle.net/tV9z9/23/像这样工作 jsFiddle http://jsfiddle.net/warmwhisky/N68wX/13/

当脚本第一次运行时，我称之为级别 1。然后单击其中一个缩略图并移动到级别 2。我想通过单击返回运行状态(级别 1)。也许是关闭按钮或返回到首次运行状态？

我试过在 js 中使用 onclick，但我无法让它工作。

我应该使用 onlick 还是可以保存 jquery 的状态并返回它？

这是代码

JS...

$(function() {
    var content = $('#content'),
        services_level2 = $('#services_level2'),
        contentHeight = content.height(),
        contentWidth = content.width(),
        level2Width = services_level2.width(),
        nav = $('#nav'),
        count = 0;

    // on load content height is shorter
    content.width(0);
    services_level2.width(613);

    nav.find('a').on('click', function() {

        var $this = $(this),
            parent =  $this.parent(),
            targetElement = $this.attr('href');

        //Does the slide animation once        
        if (count === 0) {

            //Slide out and fade away the main copy
            services_level2.animate({'width': services_level2 }, function() {               
                $(services_level2).animate({
                    'margin-left': '300%',
                    opacity: 0
                }, 900);
            });

            content.animate({'width': contentWidth }, function() {
                parent.addClass('active');
                //animate in
                $(targetElement).animate({
                    left: '-=210px',
                    'margin-left': '30%',
                    opacity: 1
                }, 400);
            });
            count = 1;            

        } else {

            //only add active class if parent does not have it and then animate it
            if ( !parent.hasClass('active') ) {

                parent.addClass('active');

                //animate in
                $(targetElement).animate({
                    left: '-=210px',
                    'margin-left': '30%',
                    opacity: 1
                }, 500);

                //Gets older clicked element
                var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');

                //only if old click element exists the do the animation
                if (oldClickedElement) {
                    //animate out + reset to start
                    $(oldClickedElement).animate({
                        left: 0,
                        'margin-left': '-50%',
                         opacity: 0
                    }, 500, function() {
                         $(oldClickedElement).css({
                            'margin-left' : '100%',
                            left: 0
                        });
                    });            
                }
            }        


        }



        return false;
    });

});

HTML...

<div id="container">

<div id="services_level2">
            <h1>IT Services</h1>
            <p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo. Omnis soluta periculis eu sit.
            </p>
            <h1>Repairs</h1>
            <p>
              Sit te habeo neglegentur, nam no dicit intellegat. Epicuri blandit sea eu, eum nibh adhuc mundi eu.
            </p>
            <h1>Other</h1>
            <p>
              Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea.
            </p>
        </div>        

        <div id="content">
        <!--<div id="zero"><p>Zero</p></div>-->
        <div id="one"><h1>Objective</h1><p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo.</p><h1>Delivery</h1><p>Sit te habeo neglegentur, nam no dicit intellegat. </p><h1>Performance</h1><p>Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea, est id suas delectus deseruisse.</p></div>
        <div id="two"><p>Two</p></div>
        <div id="three"><p>Three</p></div>
        <div id="four"><p>Four</p></div>
        <div id="five"><p>Five</p></div>
        <div id="six"><p>Six</p></div>
    </div>
    <ul id="nav">
        <!--<li><a href="#zero"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/0.jpg"></a>
        </li>-->
        <li><a href="#one"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/1.jpg"></a>
        </li>
        <li><a href="#two"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/2.jpg"></a>
        </li>
        <li><a href="#three"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/3.jpg"></a>
        </li>
        <li><a href="#four"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/4.jpg"></a>
        </li>
        <li><a href="#five"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/5.jpg"></a>
        </li>
        <li><a href="#six"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/6.jpg"></a>
        </li>
    </ul>                  
</div>

CSS...

#container {

    height:390px;
    overflow:hidden;
    float:left;
    background: #ccc no-repeat;
    min-width:918px;
    padding: 10px 10px 10px 10px;
}

#services_level2 {
    position:fixed;
    background:white;
    padding:20px;
    height: 345px;
}


#content {
    width: 650px;
    height: 385px;
    position: relative;
    overflow: hidden;
    float: right;
}
#content > div {
    display:block;
    width:600px;
    height:385px;
    background:white;
    position:absolute;
    margin-left:100%;
    /*left:-200px;*/
    opacity: 0;
    padding:10px 20px 0 40px;
}
#nav {
    list-style: none;
    display: table;
    margin: 0px 0 0 0;
    position: relative;
    width: 260px;
    float:right;
}
#nav li {
    /* width: 100px; */
    /* height: 100px; */
    float: left;
    margin-right:5px;
    /*border: 1px solid black;*/
}
#nav a {
    color:#fff;
    text-decoration:none;
    width:100%;
    height:100%;
}
ul {
    padding:0;
}
li.active {
    opacity:0.4;
    filter:alpha(opacity=40);
}

Answer 1

您需要梳理您的代码并列出第一次单击时更改的所有值，然后在单击 #reset 时反转每个值。 -=200px 会变成 +=200px 等等。