Question

这可能是因为我睡眠不足，但我无法弄明白。我正在尝试创建一个有多个视频的页面，然后在视频加载时突然出现并显示淡化的顶部div，所有这些onClick。我今天早些时候吃过它，但现在它不起作用了。该部分功能是

$('#hh').animate({
        opacity: 1
    }, 0, function() {
            myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
     $('#hh').fadeOut(400);                                                        
    });

那么，为什么这不起作用？

Answer 1

$('#hh').show();
myVideo.src = videos[numb];
myVideo.load();
myVideo.play();
$('#hh').fadeOut(400);

Answer 2

.fadeOut是让事情淡出的一种非常简单的方法。

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

.fadeOut（）方法可以设置匹配元素的不透明度。一旦不透明度达到0，显示样式属性将设置为none，因此该元素不再影响页面的布局。

持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。可以提供字符串'fast'和'slow'以分别指示200和600毫秒的持续时间。如果提供了任何其他字符串，或者省略了duration参数，则使用400毫秒的默认持续时间。

Answer 3

$('TARGET').fadeOut(300); // TARGET is any valid selector

<强> fadeOut()

   $('#hh').show('fast', function() {
         myVideo.src = videos[numb];
         myVideo.load();
         myVideo.play();
         $(this).fadeOut(400);                                                        
    });

你也可以使用

   $('#hh').fadeIn('fast', function() {
         myVideo.src = videos[numb];
         myVideo.load();
         myVideo.play();
         $(this).fadeOut(400);                                                        
    });

<强> fadeIn()

Answer 4

您可以使用

替换您的代码

    $('#hh').fadeIn('slow', function() {

                   // Call Back Function 

                   myVideo.src = videos[numb];
                   myVideo.load();
                   myVideo.play();
                   $('#hh').fadeOut('slow');                            
        }                            
    });

但有一件事我还没有理解，那就是为什么你要在myVideo.play();之后设置不透明度

Answer 5

你可以使用fadeIn，在回调中改变你的视频src，加载和播放，最后是fadeOut。它应该工作

$('#hh').fadeIn(400, function () {
  myVideo.src = videos[numb];
  myVideo.load();
  myVideo.play();
  $(this).fadeOut(400);    
});

最简单的方法来制作div fadeOut

5 个答案: