4

私はvimeo APIを使用して、再生が終了した後にビデオを画面からスライドさせています。ビデオ プレーヤーの下に、非表示の「リプレイ」という画像があります。.hide()ただし、画像はプレーヤーよりもわずかに大きいため、css を介してまたはdisplay: nonecss 内で画像を非表示にし、ビデオ プレーヤーのアニメーションが完了した後に表示したいと考えています。

これが私のjsです：

$(document).ready(function() {
  $(".vimeo-container img").hide();

  $('iframe.vimeo').each(function(){
    Froogaloop(this).addEvent('ready', ready);
  });

  function ready(playerID){
    Froogaloop(playerID).addEvent('finish', onFinish);
  }

  function onFinish(playerID) {
    var player = "#" + playerID;
    $(player).animate({width: "0%"}, 750, function() {
      $(player).next("img").show();
    });
  }
});

したがって、最初の行は画像を隠しています。そして、onFinish関数が完了すると、画像を取得しようとしてshow()いますが、機能しません。それを逆にして行うときは、次のことに注意してください。

$(player).next("img").hide();

できます。

ここに私のHTMLがあります：

%section#container1
  .row.video-left
    .large-8.columns
      .vimeo-container
        .flex-video.widescreen.vimeo
          %iframe.vimeo#player1{allowfullscreen: "", frameborder: "0", height: "225", mozallowfullscreen: "", src: "http://player.vimeo.com/video/60122989?api=1&player_id=player1", webkitallowfullscreen: "", width: "400"}
          = image_tag "behind1.png", class: "behind1"

そしてCSS：

.vimeo-container {
    position: relative;
    .behind1 {
        margin-top: -27em;
}

display: nonecssでも設定してみましたが、うまくいきません。何が欠けているのかわからない。

ありがとう。

編集

function onFinish(playerID) {
    var player = "#" + playerID;
    $(player).animate({width: "0%"}, 750, function() {
      console.log($(player));
      $(player).next().show();
    });
}

ログアウトすると ($(player) が返されます:

ここに画像の説明を入力

ログアウトconsole.log($(player).next());すると、表示しようとしている画像がログアウトされます。

4

1 に答える 1

2

ここのanimateメソッドに関するjQueryのドキュメントによると：

注: .slideDown() や .fadeIn() などの省略形のアニメーション メソッドとは異なり、.animate() メソッドは非表示の要素を効果の一部として表示しません。たとえば、$( "someElement" ).hide().animate({height: "20px"}, 500) を指定すると、アニメーションは実行されますが、要素は非表示のままになります。

プロジェクトで同様のニーズがありましたが、そこでうまくいったのは、非表示にしたい要素の z-index を背景の z-index よりも小さく設定することでした。次に、表示（または、あなたの場合はアニメーション化）したいときに、jQueryメソッドを要素に非表示であるかのように適用できます（要素が表示されるようにz-indexを増やすことにより）が、未定義を発生させることはありません非表示の要素を操作しようとする動作。

別のオプションは、負の (x, y) 座標を使用して要素を画面の外に移動し、そこから作業することです。あなたのユースケースでどちらが視覚的に魅力的かはわかりませんが、完全を期すために言及してください。

于 2014-03-14T03:13:54.967 に答える