Làm thế nào để trượt nội dung mở ra với jquery

Nhà thiết kế của tôi trao cho tôi một thiết kế Tôi không chắc chắn 100% làm thế nào để làm với jquery và css. Tôi đang cố gắng cho phép người dùng "trượt" chân trang lên để lộ thêm nhiều chú ý.Làm thế nào để trượt nội dung mở ra với jquery

html của tôi ..

<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div>

Tôi có một nút bật tắt mà onclick

$('#expandingFooter').slideToggle();

này trượt nội dung chân mở rộng mở đi xuống, sau đó trượt trở lại để đóng. Tôi muốn nó trượt lên và sau đó đóng lại.

Cảm ơn

Nguồn

2008-12-12 studiothat

Bạn có thể tận dụng hiệu ứng của JQuery UI 1.6 (Effects Demo Page). Sau đây hoàn thành hiệu quả mong muốn cho tôi.

$('#toggleButton').bind('click', function(e) { 
    $('#expandingFooter').toggle(
     'slide', 
     { easing: 'easeOutQuint', direction: 'down' }, 
     1000 
    ); 
});

Lưu ý: Bạn có thể muốn chơi với thông số giảm bớt để có được độ mượt mà mong muốn của hiệu ứng.

Bạn sẽ cần phải có phiên bản mới nhất của cả hai JQuery và JQuery UI Slide Effect để thực hiện việc này.

Nguồn

2008-12-12 19:07:52 Manik

Hãy thử một cái gì đó như thế này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){ 
    $("#footer").click(function() { 
     if ($("#expandingFooter").is(":hidden")) { 
     $("#expandingFooter").show("slow"); 
     } else { 
     $("#expandingFooter").slideUp(); 
     } 
    }); 
    $("#expandingFooter").hide(); 
    }); 
    //--></script> 

</head> 

<body> 
<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div> 
</body> 
</html>

Nguồn

2008-12-12 18:45:21 cLFlaVA

Giải pháp của tôi là một chút của một trick. Hàm slideUp() theo cách bạn muốn không được xây dựng trong JQuery vì cách bạn có thể đạt được nó phụ thuộc vào thiết kế html/css của bạn. Dòng chảy bình thường từ trên xuống dưới.

Tôi đề nghị này:

<a id="toggle">Toggle()</a> 

<div id="slide" style="position:relative; height: 100px"> 

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue""> 
     <p>Suspendisse potenti. Vivamus libero. Dummy Text</p> 
    </div> 

</div> 


<script type="text/javascript"> 
    $('.hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

    $('#toggle').click(function() { 
     $('#slideInner').slideToggle(); 
    }); 
</script>

Mã này chỉ là một ví dụ. Di chuyển css nội tuyến sang trang tính bên ngoài. Idem cho javascript.

Nếu bạn muốn div 'trượt' làm mất hiệu lực, hãy thêm gọi lại vào hàm slideToggle() ẩn cuộc gọi() trên div 'slide'.

Nguồn

2008-12-12 18:51:53

Làm thế nào để trượt nội dung mở ra với jquery

Trả lời

Các vấn đề liên quan