Ẩn Jquery animate và hiển thị

Question

Tôi muốn có hai điều xảy ra cùng một lúc khi tôi nhấp vào một liên kết. Tôi đang dần đi qua tài liệu Jquery, nhưng vẫn chưa học được những gì tôi cần.

Dưới đây là một liên kết đến site

Khi tôi bấm vào liên kết dịch vụ của tôi tôi sẽ thích div #slideshow để che giấu, và một div mới để thay thế nó.

Tôi đã cố gắng chỉ trình chiếu animate khi nhấp vào liên kết dịch vụ, nhưng sẽ thực hiện chức năng animate hoặc truy cập trang html được liên kết, chứ không phải cả hai. Làm thế nào tôi sẽ hoàn thành cả hai.

Nó không quan trọng nếu tôi chỉ ẩn và hiển thị div trên cùng một trang, hoặc nếu tôi đi đến một trang html mới. Tôi chỉ muốn có chức năng animate và thay đổi nội dung trong khi ẩn một.

đây là đoạn code jquery Tôi đang sử dụng

$(document).ready(function(){ 
    $("a.home").toggle(
    function(){ 
     $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
    }, 
    function(){ 
     $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow'); 
    } 
); 
}); 

$(document).ready(function(){ 
    $("a.services").toggle(
    function(){ 
     $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow'); 
    }, 
    function(){ 
     $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
    } 
); 
}); 

nhà và dịch vụ là hai liên kết, và tôi muốn các dịch vụ khi nhấp để ẩn div #slideshow, và hiển thị các div slideshow2, đó sẽ là ẩn và sau đó thay thế cái đầu tiên.

có số lượng html hợp lý để có thể dễ dàng xem nguồn của tôi hơn từ liên kết.

Answer 1

Đã cập nhật: Giải pháp này đã được cập nhật sau câu hỏi tiếp theo trong nhận xét.

Bạn nên sử dụng callback method phương pháp hiển thị/ẩn.

$("a").click(function(){ 

    /* Hide First Div */ 
    $("#div1").hide("slow", function(){ 
    /* Replace First Div */ 
    $(this).replaceWith("<div>New Div!</div>"); 
    }); 

    /* Hide Second Div */ 
    $("#div2").hide("slow", function(){ 
    /* Replace Second Div */ 
    $(this).replaceWith("<div>New Div!</div>"); 
    }); 

    /* If you wanted to sequence these events, and only 
    hide/replace the second once the first has finished, 
    you would take the second hide/replace code-block 
    and run it within the callback method of the first 
    hide/replace codeblock. */ 

}); 

Phương thức gọi lại là tham số thứ hai của hàm .show/.hide. Nó được chạy bất cứ khi nào phương thức .show/.hide được hoàn tất. Do đó, bạn có thể đóng/mở hộp của mình và trong phương thức gọi lại sẽ chạy một sự kiện ngay sau đó.