Thay thế JS animate bằng hiệu ứng jquery ui fold

Question

Tôi hiện đang sử dụng mã bên dưới, hoạt động tuyệt vời. Tuy nhiên, tôi đang gặp phải một vài vấn đề/hạn chế khiến tôi nghĩ rằng sẽ thích hợp hơn khi sử dụng hiệu ứng gấp jQuery UI thay vì js animate function.

Vì tôi không quen thuộc với JS, bạn có thể vui lòng giúp tôi chỉnh sửa mã dưới đây để sử dụng hiệu ứng gấp jQuery UI chứ không phải là chức năng animate không? Rất cám ơn

http://jsfiddle.net/rnjea41y/

JS:

$("a").click(function() { 
    var page = $(this).data("page"); 
    if ($('div:animated').id != page) { 
    var active = $(".fold.active"); 

    // if there is visible fold element on page (user already clicked at least once on link) 
    if (active.length) { 
     active.animate({ 
     width: "0" 
     }, 200) 
     .animate({ 
     height: "0" 
     }, 200, function() { 
     // this happens after above animations are complete 
     $(this).removeClass("active"); 
     }); 
     // clicking for the first time 
    }; 
    if (active.attr("id") != page) { 
     $("#" + page) 
     .addClass("active") 
     .animate({ 
     height: "500px" 
     }, 1000, 'linear') 
     .animate({ 
     width: "500px" 
     }, 400, 'linear') 
    } 
    } 
}); 

Answer 1

Mã của bạn là khá gần với những gì bạn cần. Tôi nghĩ vấn đề chính là phong cách của bạn và hiểu cách họ tương tác với hiệu ứng.

Hiệu ứng gấp sẽ hiển thị hoặc ẩn các phần tử dựa trên trạng thái hiện tại của chúng. Bạn có lớp học .fold bắt đầu div của bạn ở 0x0 pixel và ẩn, nhưng những gì bạn thực sự muốn là quy tắc mô tả div của bạn trông như thế nào khi được hiển thị cho người dùng của bạn.

gốc:

.fold { 
    display: none; 
    width: 0; 
    height: 0; 
    position: absolute; 
} 

Corrected:

.fold { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
} 

Kể từ khi phong cách .fold của bạn bây giờ được mô tả trạng thái cuối divs của bạn, nó không còn có một quy tắc display: none;. Vì bạn muốn div ban đầu được ẩn, bạn nên thêm một số Javascript để che giấu những bước đầu:

$(".fold").hide(); 

Bây giờ, thay vì bằng tay sinh động phong cách, bạn có thể sử dụng hiệu ứng gấp:

gốc:

// if there is visible fold element on page (user already clicked at least once on link) 
if (active.length) { 
    active.animate({ 
     width: "0" 
    }, 200) 
     .animate({ 
     height: "0" 
    }, 200, function() { 
     // this happens after above animations are complete 
     $(this).removeClass("active"); 
    }) 

    // clicking for the first time 
} 
if (active.attr("id") != page) { 
    $("#" + page) 
     .addClass("active") 
     .animate({ 
     height: "500px" 
    }, 1000, 'linear') 
     .animate({ 
     width: "500px" 
    }, 400, 'linear') 

} 

Cập nhật:

if (active.length) { 
    active.toggle("fold", function() { 
     $(this).removeClass("active"); 
    }); 
} 
// clicking for the first time 
if (active.attr("id") != page) { 
    $("#" + page) 
     .addClass("active") 
     .toggle("fold"); 
} 

Bây giờ tất cả điều đó là gia công ng, tôi nghĩ bạn sẽ muốn chơi với một số cài đặt. Các documentation for the fold effect cho thấy rằng bạn có thể thiết lập kích thước của phần tử của bạn khi nó được gấp lại cũng như thứ tự gấp. Để bắt chước liên kết mà bạn đã đăng, tôi sẽ đặt size thành 5 vì div của bạn có đường viền 5px. Tôi cũng sẽ đặt horizFirst thành true vì đó là ví dụ của bạn.

Tôi cũng quyết định sử dụng toggleClass thay vì addClass("active") và removeClass("active"). Điều này dẫn đến các cài đặt đơn giản hơn.

Dưới đây là các sản phẩm hoàn thiện:

$(".fold").hide(); 

var foldSettings = { 
    easing: 'linear', 
    duration: 1200, 
    size: 5, 
    horizFirst: true, 
    complete: function() { 
     $(this).toggleClass("active"); 
    } 
} 

$("a").click(function() { 
    var page = $(this).data("page"); 
    if ($('div:animated').id != page) { 
     var active = $(".fold.active"); 

     // if there is visible fold element on page (user already clicked at least once on link) 
     if (active.length) { 
      active.toggle("fold", foldSettings); 
     } 
     // clicking for the first time 
     if (active.attr("id") != page) { 
      $("#" + page).toggle("fold", foldSettings); 
     } 
    } 
}); 

http://jsfiddle.net/z69zofxm/3/

Answer 2

Sửa:

này đã cho tôi số lượng lớn thời gian hơn dự kiến, vì một hành vi CSS lạ, vì vậy vấn đề là đây quy tắc mà tôi đã xóa:

.fold.active { 
    display: inline-block; 
} 

Và giải pháp là đây: http://jsfiddle.net/3tf5ttrf/

$("a").click(function() { 
    var page = $(this).data("page"); 
    var selected = $("#" + page); 
    var active = $('.fold.active') 

    if (active.length > 0) { 
     if (active.first().is(selected.first())) { 
      console.log('same'); 
      toggleEl(selected); 
     } else { 
      console.log('diff'); 
      toggleEl(active); 
      toggleEl(selected); 
     } 
    } else { 
     console.log('zero'); 
     toggleEl(selected); 
    } 
}); 

function toggleEl(el) { 
    el.toggleClass("active"); 
    el.toggle("fold"); 
} 

Answer 3

Hãy thử điều này ít JS hơn CSS

$("li").on("click", function() { 
 
    var dataPage = $(this).find("a").attr("data-page"); 
 
    console.log(dataPage); 
 
    $("[id="+ dataPage + "]").addClass("active").siblings("div.fold").removeClass("active"); 
 
    $(this).addClass("active").siblings("li").removeClass("active") 
 
});

.fold { 
 
    width: 0px; 
 
    height: 0px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    transition: width .8s ease-in-out, height .8s .8s ease-in-out 
 
} 
 
.fold.active { 
 
    width: 500px; 
 
    height: 500px; 
 
    transition: height .8s ease-in-out, width .8s .8s ease-in-out 
 
} 
 

 
#fold1 { 
 
    border: 5px solid #bada55; 
 
    background: red 
 
} 
 
#fold2 { 
 
    border: 5px solid #fed900; 
 
    background: aqua 
 
} 
 
#fold3 { 
 
    border: 5px solid #223322; 
 
    background: green 
 
} 
 
#fold4 { 
 
    border: 5px solid #55bada; 
 
    background: purple 
 
} 
 
ul { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 50px; 
 
    list-style-type: none 
 
} 
 
li.active a{color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fold1" class="fold" >Div menu item 1</div> 
 
<div id="fold2" class="fold" >Div menu item 2</div> 
 
<div id="fold3" class="fold" >Div menu item 3</div> 
 
<div id="fold4" class="fold" >Div menu item 4</div> 
 
<nav> 
 
    <ul> 
 
     <li><a href="#" data-page="fold1">Menu item 1</a> 
 

 
     </li> 
 
     <li><a href="#" data-page="fold2">Menu item 2</a> 
 

 
     </li> 
 
     <li><a href="#" data-page="fold3">Menu item 3</a> 
 

 
     </li> 
 
     <li><a href="#" data-page="fold4">Menu item 4</a> 
 

 
     </li> 
 
    </ul> 
 
</nav>