2010-02-28 33 views
5

javascript của tôi không cập nhật vào lúc này và tôi bị bối rối với điều này!Danh sách thu thập dữ liệu với jQuery

Tôi cần tạo danh sách hoạt ảnh với javascript như thế này - http://www.fiveminuteargument.com/blog/scrolling-list.

Những gì tôi muốn là để có một danh sách như vậy

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

Và hiển thị hai cùng một lúc, sau đó hiển thị chúng trong một vòng lặp, 2 tại một thời điểm.

Thậm chí mã giả sẽ giúp tôi bắt đầu.

+0

Có gì sai với các thông tin được cung cấp bởi các liên kết mà bạn đã đưa ra? – Dancrumb

+0

Có một bước bị thiếu - nó không giải thích cách chuyển từ danh sách như trên sang hiệu ứng mô tả. Javascript của tôi là không đủ tốt để có được làm thế nào để thêm/loại bỏ các yếu tố. – Chris

+0

Xin chào Chris. Tôi là tác giả của hướng dẫn đó. Mục đích của tôi là đánh vần khá nhiều từng bước, vì vậy tôi xin lỗi nếu có bất cứ điều gì còn thiếu. Mã có sẵn để tải xuống ở phần chính của bài viết và tôi khuyên bạn nên bắt đầu. Nếu bạn có bất kỳ câu hỏi cụ thể nào, tôi rất sẵn lòng trả lời chúng - lý tưởng là thông qua địa chỉ email nằm phía sau liên kết 'liên hệ' trên trang web của tôi. –

Trả lời

3

Với html bạn đã bao gồm trong thư của mình, bạn có thể chạy như sau.

$(document).ready(function(){ 
    //hide all the list items 
    $("ul li").hide(); 
    //call the function initially 
    show_list_item(); 
}); 

function show_list_item(){ 
    //fade in the first hidden item. When done, run the following function 
    $("ul li:hidden").first().fadeIn("slow", function(){ 
     //if there are no more hidden list items (all were shown), hide them all 
     if($("ul li:hidden").length == 0){ 
      $("ul li").hide(); 
     } 
     //call this function again - this will run in a continuous loop 
     show_list_item(); 
    }); 
} 
+0

Cảm ơn yuval - Tôi nhận được $ ("ul li: hidden") không phải là một lỗi chức năng khi điều này chạy. Tôi đang sử dụng 1.3.2 mặc dù, vì vậy không chắc chắn lý do tại sao. – Chris

+0

bạn có bao gồm jQuery không? Đó là điều đầu tiên bạn nghĩ đến khi bạn nhận được một chức năng không có chức năng với ký hiệu đô la. Bạn có bất kỳ thư viện JS nào khác không? Hãy thử kiểm tra điều này trong một trang với jquery chỉ bao gồm, mã này, và html bao gồm. Nó sẽ hoạt động mà không có vấn đề với 1.3.2. Ngoài ra hãy chắc chắn rằng bạn quấn js của bạn với '' hoặc đưa nó vào một tệp riêng biệt. Cho tôi biết làm thế nào nó đi. –

+0

Hmmm, cùng một lỗi - tôi đặt tệp html thuần túy tại đây: http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/test.html. – Chris

0

Chỉ cần sửa đổi mã Yuval của, để có được những 'hai tại một thời điểm' hành vi làm việc:

$(document).ready(function(){ 
    //hide all the list items 
    $("ul li").hide(); 
    //call the function initially 
    show_list_item(); 
}); 

function show_list_item(){ 
    //fade in the first hidden item. When done, run the following function 
    $("ul li:hidden:first").fadeIn("slow", function(){ 
     //if there are no more hidden list items (all were shown), hide them all 
     if($("ul li:hidden").length == 0){ 
     $("ul li").hide(); 
     } 
    }); 
    $("ul li:hidden:first").fadeIn("slow", function(){ 
     //if there are no more hidden list items (all were shown), hide them all 
     if($("ul li:hidden").length == 0){ 
     $("ul li").hide(); 
     } 
     //call this function again - this will run in a continuous loop 
     show_list_item(); 
    }); 
} 
Các vấn đề liên quan