8

私の jQuery 関数によって生成されたアニメーションは不安定で、jquery.easing を追加するなど、さまざまな SO ソリューションを調べてきましたが、うまくいきませんでした。問題は各 div の iframe ですか?

アニメーションを滑らかにする方法についてのアイデアはありますか? 私の基本的なトグル機能は最良の方法ですか?

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

基本的なマークアップは以下のとおりで、ページ上で何度も繰り返されます (各 "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>

そして機能：

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

5 に答える 5

11

Andrewの解決策は正しいですが、それでもcssを次のように配置します（javascriptがオフの場合）。.videoblock{width：560px; 高さ：315px; オーバーフロー：非表示}

同時アニメーションを追加します。

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

ファイナルへのリンクは次のとおりです。http： //jsfiddle.net/gwLcD/21/

于 2012-01-29T16:21:56.047 に答える
5

これをチェックしてください - http://jsfiddle.net/vbXVR/。

このjqueryを使用します

$(document).ready(function(){
    $(".entry-title").click(function() {
        $(".videoblock").animate({height: "315"}, 1500);
    });
});
于 2012-01-28T21:34:48.897 に答える
4

このように見てみましょう！

ここで1ページにロードするiframeの数はわかりませんが、確かなことが1つあります。1つが多すぎる場合は、十分な数のYouTubeビデオが読み込まれた十分な数のiframeがあります。

つまり、不要な負荷です。ユーザーはこれらのリンクのすべてをクリックすることはできません。ユーザーはこれらのビデオのすべてを見るとは限りません。

それで：

  1. リソースの不必要な肥大化と、ユーザーの帯域幅の不必要な消費があります。

  2. さらに、これはスケーラブルではありません。1ページに50個のリンクが必要だと考えてください。わかった。たった10個取ってください。それでもかなりたくさんです！

私はこれのためにjsfiddleを作成しています。完了したら、ここに投稿します！

于 2012-02-04T19:49:47.460 に答える
1

アコーディオン プラグインを直接使用したくない具体的な理由はありますか? jQuery UI ライブラリは、これをうまく処理する必要があります。

また、うまくいかない場合は、css3 アニメーションを試していただけますか？ここで CSS3 アニメーションの概要を取得できます: http://titansturf.in/2012/01/12/using-css3-transitions/

2 つのクラスを作成する必要があります。1 つdiv-hideは を持ちheight: 0、もう 1 つdiv-showは必要なheightセットを持ちます。切り替えたいときはいつでも、jQuery を使用してクラスを変更するだけです。

IMO、ターゲットオーディエンスが最新のブラウザーを使用している場合、CSS3 を使用することは良いオプションです。そうでない場合は、Modernizr を使用して、使用しているブラウザーの種類に応じて動作を変更できます。

于 2012-02-01T07:15:39.320 に答える
1

主にどのブラウザを狙っていますか? Webkit ブラウザーまたは FireFox のいずれかである場合は、jquery フォールバックを使用してハードウェア アクセラレーション CSS3 トランジションを利用できます。

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

jQuery イージングは​​現在、最初のオプションとして CSS3 トランジションを使用しているとは思いませんが、間違っている場合は修正してください。

見てみましょう: http://css3.bradshawenterprises.com/all/

CSS3 を使用して何かをハッキングするのは、それほど大変なことではありません。

于 2012-02-04T15:42:39.787 に答える