Làm mịn hoạt ảnh chuyển đổi jQuery này?

Question

Hoạt ảnh sản xuất bởi hàm jQuery của tôi là run rẩy, và tôi đã xem xét các giải pháp SO khác nhau, chẳng hạn như thêm jquery.easing, nhưng không may mắn. Vấn đề là iframe trong mỗi div?

Bất kỳ ý tưởng nào về cách làm mịn hoạt ảnh? Chức năng chuyển đổi cơ bản của tôi có phải là cách tốt nhất không?

JSFiddle:http://jsfiddle.net/gwLcD/8/

Các đánh dấu cơ bản là dưới đây, và được lặp lại nhiều lần trên trang (với khối văn bản ở giữa mỗi "videotoggle" div):

<div class="videotoggle"> 

    <p><h2 class="entry-title">View a few minutes of the (title) video </h2></p> 

    <div class="videoblock"> 

    <iframe width="560" height="315" src="http://www.youtube.com/embed/????????" 
    frameborder="0" allowfullscreen></iframe> 

    </div></div> 

Và chức năng:

$(document).ready(function(){ 
$(".videoblock").hide(); //closes all divs on first page load 
$(".entry-title").click(function() { 
    $this = $(this); //this next code only allows one open div at a time 
    $content = $this.closest('.videotoggle').find(".videoblock"); 
    if (!$this.is('.active-title')) { 
     $('.active-title').removeClass('active-title'); 
     $this.addClass('active-title'); 
     $(".videoblock:visible").slideToggle(400); //slide toggle 
     $content.slideToggle(400); 
    } 
}); 
}); 

Answer 1

giải pháp Andrew là đúng, nhưng tôi vẫn sẽ đặt các css như thế này (nếu javascript tắt): .videoblock {width: 560px; chiều cao: 315px; overflow: hidden}

và thêm các hình ảnh động đồng thời:

$('.videoblock').css('height','0'); 
$(".entry-title").click(function() { 
    $this = $(this); 
    $content = $this.closest('.videotoggle').find(".videoblock"); 
    if (!$this.is('.active-title')) { 

     $('.active-title').removeClass('active-title'); 
     $this.addClass('active-title'); 
     $(".videoblock:visible").animate({height: "0"}, { duration: 400, queue: false }); 
     $content.animate({height: "315"}, { duration: 400, queue: false }); 
    } 
}); 

Dưới đây là liên kết đến trận chung kết: http://jsfiddle.net/gwLcD/21/

Answer 2

kiểm tra điều này - http://jsfiddle.net/vbXVR/.

nó sử dụng jquery này

$(document).ready(function(){ 
    $(".entry-title").click(function() { 
     $(".videoblock").animate({height: "315"}, 1500); 
    }); 
}); 

Answer 3

Bất kỳ lý do cụ thể mà bạn không muốn sử dụng một plugin accordion trực tiếp? Thư viện giao diện người dùng jQuery nên chăm sóc điều này khá độc đáo.

Ngoài ra, trong trường hợp không hoạt động như mong đợi, bạn có thể thử hoạt ảnh css3 không? Bạn có thể có được một ý chính của CSS3 hình ảnh động ở đây: http://titansturf.in/2012/01/12/using-css3-transitions/

Bạn sẽ phải tạo ra hai lớp, một lớp với div-hide, trong đó có height: 0 và một với div-show trong đó có các yêu cầu height bộ. Bất cứ khi nào bạn muốn chuyển đổi, chỉ cần thay đổi lớp bằng cách sử dụng jQuery.

IMO, sử dụng CSS3 sẽ là một lựa chọn tốt trong khi đối tượng mục tiêu của bạn sử dụng trình duyệt hiện đại. Nếu không, bạn có thể sử dụng Modernizr để thay đổi cách thức hoạt động theo loại trình duyệt đang được sử dụng.

Answer 4

Trình duyệt nào bạn chủ yếu nhắm đến? Nếu đó là bất kỳ trình duyệt webkit hoặc FireFox nào thì bạn có thể tận dụng lợi thế của quá trình chuyển đổi CSS3 tăng tốc phần cứng với dự phòng jquery.

http://msdn.microsoft.com/en-us/scriptjunkie/hh304380

Tôi không nghĩ rằng jQuery hiện giảm bớt sử dụng hiệu ứng chuyển tiếp CSS3 như một lựa chọn đầu tiên nhưng chính xác cho tôi nếu tôi sai.

Hãy xem tại địa chỉ: http://css3.bradshawenterprises.com/all/

Sẽ không quá nhiều nỗ lực ở tất cả để hack một cái gì đó bằng cách sử dụng CSS3.

Answer 5

Hãy nhìn vào nó theo cách này!

Tôi không chắc chắn số lượng các iframe này bạn sẽ tải lên trên một trang ở đây, nhưng có một điều dường như rất chắc chắn; nếu bạn có quá nhiều, bạn sẽ có đủ iframe với đủ video tải lên youtube.

Có nghĩa là, tải không cần thiết. Người dùng có thể không nhấp vào tất cả các liên kết đó. Người dùng có thể không xem tất cả các video đó.

Vì vậy:

1. Có một sưng lên không cần thiết lên các nguồn tài nguyên, và mức tiêu thụ không cần thiết của băng thông của người dùng.

2. Và hơn thế nữa, tính năng này không thể mở rộng được. Hãy xem xét, bạn cần 50 trong số các liên kết đó trên một trang. ĐƯỢC. Hãy chỉ 10. Thậm chí đó là khá nhiều!

Tôi đang cố gắng giải quyết vấn đề này. Sẽ đăng nó ở đây, khi hoàn tất!