Hiệu ứng ẩn, hiện nội dung với jQuery

Nhằm chia sẻ kiến thức cho các bạn sinh viên về jQuery, hôm nay mình xin chia sẻ một hiệu ứng mà hầu như các portfolio website thường hay dùng. Hiệu ứng này có thể diễn giải bằng hình sau hoặc demo bên dưới hình.

Demo | Download

Trong hiệu ứng này, chúng ta sẽ kết hợp giữa animation và hiệu ứng jQuery UI easing.

Bước 1 : HTML Markup

Các bạn copy đoạn html bên dưới để làm ví dụ :

</pre>
<div id="about">
<h2>Lorem Ipsum Dolor</h2>
....</div>
<div id="mainpage"><nav>
<h1>Webpage Title</h1>
<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#about">Click Me</a></li>
	<li><a class="hovertrigger" href="#">Hover Me</a></li>
</ul>
</nav>
<div id="content"> </div>
</div>
<pre>

Bước 2 : Chèn các khai báo vào ngay bên trên thẻ

	<link href="style.css" rel="stylesheet" media="all" type="text/css" />
	<link href="http://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet" media="all" type="text/css" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script charset="utf-8" type="text/javascript" src="js/nav-left.js"></script>

Trong đó style.css và nav-left.js là những file chúng ta cần tạo thêm tại thư mục mà các bạn làm demo.

Bước 3 : Định dạng css

Các bạn copy đoạn css sau và dán vào bên trong file style.css :

#about {
    display: block;
    awidth: 350px;
    padding: 8px 11px;
    padding-top: 35px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

#mainpage {
    awidth: 100%;
    height: auto;
    display: block;
    background: #473d47 url('bg.png');
    min-height: 800px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    color: #fff;
}

#mainpage nav {
     position: absolute;
     awidth: 180px;
     min-height: 100%;
     padding: 0px 8px;
     padding-top: 220px;
     background: #343638;
}

#mainpage nav h1 {
     font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif;
     font-size: 1.85em;
     line-height: 1.3em;
     font-weight: bold;
     text-transform: uppercase;
     margin-bottom: 11px;
}

ul#navigation {padding:0; margin: 0;}

#navigation { list-style: none; }
#navigation li { display: block; margin-bottom: 2px; font-size: 0.9em; font-weight: bold; }
#navigation li a { display: block; padding: 8px 6px;  color: #d1e0f8; text-decoration: none; }
#navigation li a:hover, #navigation li a.open { color: #fff; background: #484e57; }

Bước 4 : Phần jQuery

Đầu tiên các bạn mở file nav-left.js ,rồi sau đó tiến hành tạo hiệu ứng như sau :

– Hiệu ứng cho phần click chuột :

    $("#navigation li a").on("click", function(e){
     e.preventDefault();
     var hrefval = $(this).attr("href");

     if(hrefval == "#about") {
      var distance = $('#mainpage').css('left');

      if(distance == "auto" || distance == "0px") {
       $(this).addClass("open");
       openSidepage();
      } else {
       closeSidepage();
      }
     }
    }); // end click event handler

Kế tiếp là hiệu ứng khi rê chuột (hover):

    $("#navigation li a").on("hover", function(){
     var classval = $(this).hasClass("hovertrigger");

     if(classval == true) {
      var distance = $('#mainpage').css('left');

      if(distance == "auto" || distance == "0px") {
       $(this).addClass("open");
       openSidepage();
      }
     }
    }); // end hover event handler

Hiệu ứng đóng lại khi nhấn nút ” Close me “.

    $("#closebtn").on("click", function(e){
     e.preventDefault();
     closeSidepage();
    }); // end close button event handler

Sau khi thực hiện xong, các bạn chỉ cần copy thêm 2 hàm sau :

    function openSidepage() {
     $('#mainpage').animate({
      left: '350px'
     }, 400, 'easeOutBack');
    }

    function closeSidepage(){
     $("#navigation li a").removeClass("open");
     $('#mainpage').animate({
      left: '0px'
     }, 400, 'easeOutQuint');
    }

Bây giờ các bạn chỉ việc save lại trang chủ, và kiểm tra thành quả của mình xem sao nhé. Mình hy vọng chỉ với bài viết ngắn ngủi này, các bạn có thể nắm vững và hiểu rõ hơn về hàm chức năng .css() và animate() trong jQuery cùng với các hiệu ứng easing có trong jQueryUI.

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster