Wygładź tę animację przełączania jQuery?

Question

Animacja wyprodukowana przez moją funkcję jQuery jest chwiejna i przeglądałem różne rozwiązania SO, takie jak dodanie jquery.easing, ale bez powodzenia. Czy problem dotyczy elementów iframe w każdym div?

Jakieś pomysły na wygładzenie animacji? Czy moja podstawowa funkcja przełączania jest najlepsza?

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

Podstawowym markup jest poniżej, a powtarza się wiele razy na stronie (z bloków tekstu między sobą "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> 

A funkcja:

$(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

Andrzeja rozwiązanie jest poprawne, ale nadal stawiałaby css tak (jeśli javascript jest wyłączona): .videoblock {width: 560px; wysokość: 315 pikseli; overflow: hidden}

i dodać jednoczesna animacja:

$('.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 }); 
    } 
}); 

Oto link do finału: http://jsfiddle.net/gwLcD/21/

Answer 2

sprawdź to - http://jsfiddle.net/vbXVR/.

używa tego jQuery

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

Answer 3

Wszelkie konkretnego powodu nie chcesz użyć wtyczki akordeon bezpośrednio? Biblioteka jQuery UI powinna się tym zająć.

Ponadto, jeśli nie działa zgodnie z oczekiwaniami, czy możesz wypróbować animacje css3? Można uzyskać istotę animacji CSS3 tutaj: http://titansturf.in/2012/01/12/using-css3-transitions/

Trzeba będzie stworzyć dwie klasy, jeden z div-hide, która height: 0 i jeden z div-show która posiada wymaganą height zestawu. Ilekroć chcesz się przełączyć, po prostu zmień klasę za pomocą jQuery.

IMO, używając CSS3, byłoby dobrym rozwiązaniem, gdyby twoja grupa docelowa używała nowoczesnych przeglądarek. Jeśli nie, możesz użyć Modernizr, aby zmienić sposób działania w zależności od używanej przeglądarki.

Answer 4

Do jakiej przeglądarki najczęściej się broni? Jeśli jest to którakolwiek z przeglądarek Webkit lub FireFox, możesz skorzystać ze sprzętowo przyspieszonych przejść CSS3 z awarią jquery.

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

Nie sądzę jQuery złagodzenie obecnie używa przejścia CSS3 jako pierwszej opcji, ale mnie poprawić jeśli się mylę.

Spójrz: http://css3.bradshawenterprises.com/all/

To nie byłoby zbyt wiele wysiłku w ogóle coś do włamywania się za pomocą CSS3.

Answer 5

Spójrzmy na to w ten sposób!

Nie jestem pewien, ile z tych elementów iframe zostanie załadowanych na jednej stronie, ale jedno wydaje się być bardzo pewne; jeśli masz jedno za dużo, będziesz mieć wystarczająco dużo elementów iframe z wystarczającą ilością filmów youtube.

Co oznacza niepotrzebne ładunki. Użytkownik nie może kliknąć wszystkich tych linków. Użytkownik może nie oglądać wszystkich tych filmów.

Więc:

1. Jest niepotrzebny uwędzić się zasobów i niepotrzebne zużycie pasma użytkownika.

2. Co więcej, nie jest to skalowalne. Rozważ, potrzebujesz 50 takich linków na stronie. OK. Wystarczy 10. Nawet to dużo!

Pracuję nad jsfiddle dla tego. Opublikuję go tutaj, po zakończeniu!