Question

当光标在播放时悬停在视频上，然后动画“＃”暂停＆＃39;很好，当我切换它时 - 它也很好，但是当视频停止时，光标从视频中移除并再次悬停在它上面 - 然后我的动画片“播放”＃39;失败了。

尝试在视频播放和停止时设置不同的行为：

var x = myVid.play();
var x = true;

if ( x ) {

}

var y = myVid.pause();
var y = true;

if ( y ) {

}

我如何解决它或任何想法都会很棒。

fiddle

live example

Answer 1

在悬停时，您应该检查视频是播放还是停止。此外，如果你为点击做同样的事情会更容易。

如下所示（我确实用不透明度替换了你的幻灯片）

$(document).ready(function(){
    console.log("as");
    myVid=document.getElementById('infoVideo');

    $('#video-mask').hover(function (){

      $(this).animate({ opacity: '1' }, 200 ,function(){
        if(!myVid.paused){
            $('#video-play').animate({opacity : '0'}, 200);
            $('#video-pause').animate({opacity : '1'}, 200);

        }else{
            $('#video-play').animate({opacity : '1'}, 200);
            $('#video-pause').animate({opacity : '0'}, 200);
        }
      });
      },function(){
        $(this).animate({ opacity: '0' }, 200);
    });

    $('#video-mask').on('click', function(){
        if(!myVid.paused){
            myVid.pause();
            $('#video-play').animate({opacity : '1'}, 200);
            $('#video-pause').animate({opacity : '0'}, 200);
        }else{
            myVid.play();
            $('#video-play').animate({opacity : '0'}, 200);
            $('#video-pause').animate({opacity : '1'}, 200);
        }
    });
});

视频播放暂停按钮动画

1 个答案: