jQuery slideDown so với jQuery UI .show ('slide')

Question

Tôi đang cố gắng sử dụng chức năng hiệu ứng tích hợp của jQuery để tạo "ngăn kéo" trượt ra từ phía sau thanh điều hướng, đẩy nội dung bên dưới nó ra khỏi đường.

Nếu tôi sử dụng $('#drawer').slideDown(), nội dung sẽ bị đẩy ra khỏi đường nhưng nội dung không thực sự "trượt xuống". Đó là nhiều hơn của một lau để tiết lộ nội dung.

Nếu tôi sử dụng $('#drawer').show('slide',{direction:'up'}), nội dung sẽ trượt xuống một cách chính xác, nhưng tất cả nội dung bên dưới phần tử nhảy ra khỏi đường trước khi hiệu ứng xảy ra.

Có cách nào để kết hợp tốt nhất của cả hai cách này để nhân rộng hiệu ứng tôi đang tìm kiếm: ngăn kéo trượt ra ngoài, đẩy nội dung bên dưới nó ra khỏi đường?

Tôi đã điều tra chức năng .animate() của giao diện người dùng jQuery, nhưng tài liệu không hữu ích. Những nỗ lực thô lỗ của tôi để sử dụng nó đã bị thất bại.

Và, trong trường hợp có ai hỏi, xin lỗi, tôi không thể hiển thị một ví dụ, nhưng chúng tôi muốn nó hoạt động như các plugin jQuery Drawer:

http://lib.metatype.jp/jquery_drawer/sample.html

Nhưng plugin mà không làm hoàn toàn là những gì chúng ta cần, hoặc nếu không tôi chỉ sử dụng nó (không sử dụng danh sách có dấu đầu dòng hoặc nội dung AJAX). Tuy nhiên, hiệu ứng có những gì chúng tôi muốn.

UPDATE: Tôi cũng đã thử phần này của mã qua các plugin jQuery Drawer, nhưng nó không sinh động tại tất cả:

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 }); 

Để làm rõ, quá, điều này được gọi là trong vòng một hàm OpenDrawer() rằng được gọi là như vậy:

$(document).ready(function() { 
    OpenDrawer(); 
}); 

Bởi vì theo mặc định nó sẽ tải khi tải trang.

Answer 1

Có nó giống như hành vi accordion ngoại trừ việc bạn cũng có thể trượt nó lên. Tôi đã sử dụng chức năng này để tạo ra những gì tôi nghĩ rằng bạn đang tìm kiếm.

$('#drawer').slideDown('slow');

Bằng cách thay đổi tốc độ mà bạn có thể nhận được tốc độ trượt khác nhau để tìm kiếm theo cách bạn muốn nó. Bây giờ, mặc dù bạn có phần tử ngăn kéo, bạn cần một vùng chứa ban đầu được ẩn, đó là những gì sẽ trượt. Giả sử bạn có nút có id là "ngăn kéo" và vùng chứa có id là "myDrawerContent". Bạn sẽ làm như sau,

$('#drawer').click(function() { 
    $('#myDrawerContent').slideDown('slow'); 
} 

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function() { $('#drw_loader').fadeOut(function() { $('#drw_ajax').fadeIn(); }); 
}); 

Hope this helps.

Metropolis

Answer 2

Các javascript bạn có trong bản cập nhật câu hỏi của bạn hoạt động, nhưng nó cần để hoạt động trên một yếu tố có chứa nội dung của bạn chứ không phải là nội dung chính nó.

Để thấy điều này trong hành động, bao quanh các yếu tố #drawer với div khác:

<div id='container'> 
    <div id='drawer'>...</div> 
<div> 

Và animate container:

$('#container') 
    .css({ marginTop: $('#container').height() * -1 }) 
    .animate({ marginTop: 0 }); 

Answer 3

Tôi tin rằng bạn đang tìm kiếm một hiệu ứng giống như 'mù ':

$('#drawer').show('blind'); 

Thật lạ lùng khi $ .fn.slideDown () và $ .fn.show ('slide') không hoạt động theo cùng một cách, mà đúng hơn là 'mù'. 'slide' tạo ra một trình giữ chỗ kích thước của đối tượng của bạn và sau đó trượt vào khung nhìn, trong khi mù điều chỉnh chiều cao hoặc chiều rộng của phần tử cho đến khi nó mở rộng đến kích thước chính xác (trong khi tràn được đặt thành ẩn). Vì vậy, trên thực tế, tên hiệu ứng là chính xác, nhưng có một số nhầm lẫn vì tên cũ $ .fn.slideDown().

Answer 4

Đây là một bài đăng muộn, nhưng tôi đã gặp phải sự cố này và đã quản lý để thực hiện điều gì đó hiệu quả.

Tôi không phải là một Chuyên gia về jQuery hay Javascript nên đừng quá khắc nghiệt với giải pháp nhanh này.

Dưới đây là một ví dụ nhỏ. Thứ tự của các hiệu ứng phải được tôn trọng. Bạn có thể phát với độ dài thời gian hoạt ảnh để có hiệu ứng vẽ thực sự đẹp mắt.

Tôi vừa thử nghiệm nhanh trên FF 3.6

Bạn có thể thử ví dụ trên sân chơi mã google. http://code.google.com/apis/ajax/playground/#jqueryui

Nhấp vào chỉnh sửa html, dán mã và nhấp vào mã chạy. Ví dụ nên làm việc

Hy vọng nó sẽ giúp

<html> 
<head> 
<!--<script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>--> 
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
    </script> 
</head> 
<body> 
<script> 
jQuery(function() 
{ 
    // We bind the <a>I'm the push link!</a> click event to the toggle function 
    $("#topPart a").click(function() 
             { 
              toggleSlide(this); 
             });     
}); 
function toggleSlide(element) 
{ 
    var drawer = jQuery("#drawer"); 
    var content = jQuery("#drawerContent"); 
    if (jQuery(content).is(":hidden")) 
    { 
     // The order here is important, we must slide juste before starting blinding 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490); 

        },1); 
    } 
    else 
    { 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500); 
         // The previous blind effect hide the drawer 
         // However we want it to be shown again, if not the next "drawer opening effect" won't play 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460); 
        },1); 
    } 
} 

</script> 

    <div id="topPart"> 
     <a href="javascript:void(0)">I'm the push link!</a> 
    </div> 
    <div id="drawer"> 
     <div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;"> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, .... 
     </p> 
     <p> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
     </div> 
    </div> 
    <div id="bottomPart"> 
    I want to be pushed nicely 
    </div> 
</body> 
</html> 

Answer 5

Tôi đã tìm kiếm một thực hiện khá hiệu ứng này (có vẻ đơn giản) cũng vậy, và điều này là tốt nhất tôi đã tìm thấy : http://eric.muyser.com/work/jquery/drawer/example/

Xem ở đây để biết thêm thông tin/code/etc: http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

Tuy nhiên, nó vẫn có vẻ quá mức cần thiết và cần phải được luộc xuống một plugin hoạt hình tinh túy có thể được gọi/áp dụng thông qua .show(), chính xác là những gì bạn mong đợi đã có trong jQuery/UI như là tiêu chuẩn ngay từ đầu ... nhưng thật đáng buồn là không ...