jQuery面板转换

时间：2014-05-15 02:06:15

标签： jquery

我希望我的面板功能很好，如果我点击我的链接并且没有面板打开，打开新面板时将没有延迟，但如果有一个打开的面板我想延迟下一个面板，所以过渡将是美丽的

HTML 

$(document).ready(function () {
    $('#about-link').on('click', function () {
        //CLOSE
        $('div.farm-home').fadeOut(100, function () {
            $('div.farm-panel').animate({'width': 'hide'}, 500);
        });
        $('div.recomm-home').fadeOut(100, function () {
            $('div.recomm-panel').animate({'width': 'hide'}, 500);
        });
        $('div.consultant-home').fadeOut(100, function () {
            $('div.consultant-panel').animate({'width': 'hide'}, 500);
        });
        //OPEN
        $('div.about-panel').animate({'width': 'show'}, 1000, function () {
            $('div.panel-bg').animate({'width': 'show'}, 1000, function () {
                $('div.about-home').fadeIn(500);
            });
        });
    });

    $('#farm-link').on('click', function () {
        //CLOSE
        $('div.about-home').fadeOut(100, function () {
            $('div.about-panel').animate({'width': 'hide'}, 500);
        });
        $('div.recomm-home').fadeOut(100, function () {
            $('div.recomm-panel').animate({'width': 'hide'}, 500);
        });
        $('div.consultant-home').fadeOut(100, function () {
            $('div.consultant-panel').animate({'width': 'hide'}, 500);
        });
        //OPEN
        $('div.farm-panel').animate({'width': 'show'}, 1000, function () {
            $('div.panel-bg').animate({'width': 'show'}, 1000, function () {
                $('div.farm-home').fadeIn(500);
            });
        });
    });

    $('#recomm-link').on('click', function () {
        //CLOSE
        $('div.about-home').fadeOut(100, function () {
            $('div.about-panel').animate({'width': 'hide'}, 500);
        });
        $('div.farm-home').fadeOut(100, function () {
            $('div.farm-panel').animate({'width': 'hide'}, 500);
        });
        $('div.consultant-home').fadeOut(100, function () {
            $('div.consultant-panel').animate({'width': 'hide'}, 500);
        });
        //OPEN
        $('div.recomm-panel').animate({'width': 'show'}, 1000, function () {
            $('div.panel-bg').animate({'width': 'show'}, 1000, function () {
                $('div.recomm-home').fadeIn(500);
            });
        });
    });

    $('#consultant-link').on('click', function () {
        //CLOSE
        $('div.about-home').fadeOut(100, function () {
            $('div.about-panel').animate({'width': 'hide'}, 500);
        });
        $('div.farm-home').fadeOut(100, function () {
            $('div.farm-panel').animate({'width': 'hide'}, 500);
        });
        $('div.recomm-home').fadeOut(100, function () {
            $('div.recomm-panel').animate({'width': 'hide'}, 500);
        });
        //OPEN
        $('div.consultant-panel').animate({'width': 'show'}, 1000, function () {
            $('div.panel-bg').animate({'width': 'show'}, 1000, function () {
                $('div.consultant-home').fadeIn(500);
            });
        });
    });

    //CLOSE BUTTON
    $('a.close').on('click', function () {
        $('div.about-home').fadeOut(500, function () {
            $('div.about-panel').animate({'width': 'hide'}, 1000);
        });
        $('div.farm-home').fadeOut(500, function () {
            $('div.farm-panel').animate({'width': 'hide'}, 1000);
        });
        $('div.recomm-home').fadeOut(500, function () {
            $('div.recomm-panel').animate({'width': 'hide'}, 1000);
        });
        $('div.consultant-home').fadeOut(500, function () {
            $('div.consultant-panel').animate({'width': 'hide'}, 1000);
        });
    });
});

CSS 

    /* NAVIGATION */

  nav{
    position: relative;
    margin: 0 auto;
    width: 180px;
    top: 20px;
  }

  nav ul{
    text-align: left;
  }

  nav li{
    display: block;
    padding: 5px 0;
  }

  nav a{
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 15px;
    line-height: 25px;
    color: #616161;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
  }

  nav a > li > span{
    font-weight: bold;
  }

  nav li:hover {
    color: #6F6E6E;
    border-right: 2px solid #D10606;
    padding-right: 10px;
    opacity: .80;
  }

  nav li:hover > ul{
    position: relative;
    left: 0;
    top: 0;
  }

  nav li:hover > ul > li{
      display: block;
  }

  nav .li-farm ul{
    position: absolute;
    left: -9999px;
    top: -9999px;
    margin: 0;
  }

  .current{
    color: #6F6E6E;
    border-right: 2px solid #D10606;
    padding-right: 10px;
    opacity: .80;
  }

  /*CONTAINER*/
  .container{
    position: relative;
    left: 220px;
    width: 75%;
    height: 100%;
  }

  /* -- ABOUT PANEL --*/
  div.about-panel {
    display:none;
    position: absolute;
    top: 0;
    width:100%;
    left:0%;
    height: 100%;
    margin: 0;
    overflow:hidden;
  }

  div.about-home {
      position: absolute;
      display:none;
      font-family:arial;
      color:white;
      width: 100%;
      z-index: 5;
      padding:30px;
      overflow:hidden;
  }

  /* -- FARM PANEL --*/
  div.farm-panel {
    display:none;
    position: absolute;
    top: 0;
    width:100%;
    left:0%;
    height: 100%;
    margin: 0;
    overflow:hidden;
  }

  div.farm-home {
      position: absolute;
      display:none;
      font-family:arial;
      color:white;
      width: 100%;
      z-index: 5;
      padding:5px;
      overflow:hidden;
  }

  /* -- RECOMMENDATION PANEL --*/
  div.recomm-panel {
    display:none;
    position: absolute;
    top: 0;
    width:100%;
    left:0%;
    height: 100%;
    margin: 0;
    overflow:hidden;
  }

  div.recomm-home {
      position: absolute;
      display:none;
      font-family:arial;
      color:white;
      width: 100%;
      z-index: 5;
      padding:35px;
      overflow:hidden;
  }

  /* -- CONSULTANTS PANEL --*/
  div.consultant-panel {
    display:none;
    position: absolute;
    top: 0;
    width:100%;
    left:0%;
    height: 100%;
    margin: 0;
    overflow:hidden;
  }

  div.consultant-home {
    position: absolute;
    display:none;
    font-family:arial;
    color:white;
    width: 100%;
    z-index: 5;
    padding:35px;
    overflow:hidden;
  }

  /* MISC FOR PANEL */
  div.panel-bg{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/gradient-bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    z-index: 2;


  }

  a.close {
    position:absolute;
    width: 25px;
    right:15px;
    top:15px;
    cursor:pointer;
    z-index: 5;
  }

  a.close:hover{
    opacity: .9;
  }

HTML 

   <!-- SIDEBAR -->
<div class="sidebar">
    <div class="sidebar-content">
            <img class="clearvision-logo" src="<?php echo base_url();?>assets/img/cvo-logo.png">
        <!-- NAVIGATION OF THE WEBSITE -->
        <nav>
            <ul>
            <hr></hr>
                <a class="nav-about" id="about-link" href="#">
                    <li class="li-about">About <span>CAPE 2014</span></li>
                </a>
            <hr></hr>
                <a class="nav-farm" id="farm-link" href="#">
                    <li class="li-farm">Farm Benificiaries (Interactive <span>Map</span>)</li>
                </a>
            <hr></hr>
                <a class="nav-findings" id="recomm-link" href="#">
                    <li class="li-finding">Findings <span>and</span> Recommendations</li>
                </a>
            <hr></hr>
                <a class="nav-consultants" id="consultant-link" href="#">
                    <li class="li-consultant">The <span>Consultants</span></li>
                </a>
            <hr></hr>
            </ul>
        </nav>
    </div>
    <div class="sidebar-bg"></div>
</div>

<!-- HEADER OF THE WEBSITE -->
<div class="header">
    <div class="title">
        <img class="dost-logo" src="<?php echo base_url(); ?>assets/img/dost.png"><h1>Department of Science and technology - Region III</h1>
    </div>
    <div class="header-bg"></div>
</div>
<!-- HEADER END -->

<!-- MAIN CONTAINER OF THE WEBSITE -->
<div class="container">

    <!-- MAP -->
        <div class="title-map">
            <h2>REGION III MAP</h2>
        </div>
        <div class="map_image" style="background-image: url('<?php echo base_url(); ?>assets/img/map-bg.png');">
            <a class="map_link" id="zambales" title="" href="">zambales</a>
            <a class="map_link" id="tarlac" title="" href="">tarlac</a>
            <a class="map_link" id="nuevaecija" title="" href="">nuevaecija</a>
            <a class="map_link" id="bataan" title="" href="">bataan</a>
            <a class="map_link" id="pampanga" title="" href="">pampanga</a>
            <a class="map_link" id="bulacan" title="" href="">bulacan</a>
            <a class="map_link" id="aurora" title="" href="">aurora</a>
        </div>

    <!-- ABOUT PANEL -->
    <div class="about-panel">
        <div class="about-home">
          <a class="close"><img src="<?php echo base_url();?>assets/img/close.png"></a>
         <p>asdasd</p>
        </div>
        <div class="panel-bg"></div>
    </div>

    <!-- FARM MAP 1 PANEL -->
    <div class="farm-panel">
        <div class="farm-home">
          <a class="close"><img src="<?php echo base_url();?>assets/img/close.png"></a>

        <!-- MAP -->
        <div class="title-map">
            <h2>REGION III MAP</h2>
        </div>
        <div class="map_image" style="background-image: url('<?php echo base_url(); ?>assets/img/map-bg.png');">
            <a class="map_link" id="zambales" title="" href="">zambales</a>
            <a class="map_link" id="tarlac" title="" href="">tarlac</a>
            <a class="map_link" id="nuevaecija" title="" href="">nuevaecija</a>
            <a class="map_link" id="bataan" title="" href="">bataan</a>
            <a class="map_link" id="pampanga" title="" href="">pampanga</a>
            <a class="map_link" id="bulacan" title="" href="">bulacan</a>
            <a class="map_link" id="aurora" title="" href="">aurora</a>
        </div>

        </div>
        <div class="panel-bg"></div>
    </div>

    <!-- RECOMMENDATION PANEL -->
    <div class="recomm-panel">
        <div class="recomm-home">
          <a class="close"><img src="<?php echo base_url();?>assets/img/close.png"></a>
         <p>asdasd</p>
        </div>
        <div class="panel-bg"></div>
    </div>

    <!-- RECOMMENDATION PANEL -->
    <div class="consultant-panel">
        <div class="consultant-home">
         <a class="close"><img src="<?php echo base_url();?>assets/img/close.png"></a>
         <p>asdasd</p>
        </div>
        <div class="panel-bg"></div>
    </div>

</div>

1 个答案:

答案 0 :(得分：0)

也许这可以帮到你

$(function() {
    $('button').click(function() {
        var visibleDiv = $('.animatedDivs').filter(function() {
            return $(this).is(':visible');
        });
        var $target = $('#' + $(this).data('target'));
        if(visibleDiv.length == 0) {
            $target.show();
        }
        else {
            // do your beatiful transitions here
            visibleDiv.fadeOut();
            $target.fadeIn();
        }
    });
});

JSFiddle：http://jsfiddle.net/67Y3U/

相关问题
最新问题