Question

我正在构建一个基于缩略图的导航和大图像或视频作为背景的网站。请在此处查看http://www.sarahnwatson.com。

现在我已经拥有了它，所以如果你点击一个视频，导航菜单会激活动画，以便你可以更好地看到视频。我想这样做，以便在暂停时菜单动画回来。

这是代码

//clicking on a thumb, replaces the large image or video
                $list.find('.st_thumbs img').bind('click',function(){
                var $this = $(this);
                $loader.show();
                var src = $this.attr('alt');
                if (/\.(mp4|ogv)$/i.test(src)) {
                var $currImage = $('#st_main').children('img,video').first();
                $("<video class='st_preview' controls='controls' id='video' preload='auto'>").attr({ src: src }).insertBefore($currImage);

                $('.st_overlay').hide();
                setTimeout('playVid()', 5000);
                $socialLinks.animate({ 'left': -($socialLinks.width()) }, 500);
                hideThumbs();
                    $("video").bind("play", function() {
                       $list.children().each(function(i,el) { // loop through the LI elements within $list
                            $(el).delay(500*i).animate({'left':'-300px'},1000);
                        });
                    });

                    $("video").bind("pause", function() {
                       $list.children().each(function(i,el) { // loop through the LI elements within $list
                            $(el).delay(500*i).animate({'left':'300px'},1000);
                        });
                    });

                $download.fadeOut(1000);
                $currImage.fadeOut(2000,function(){
                    $(this).remove();
                });
            }
                else {
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img,video').first();
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $('.st_overlay').show();
                        $socialLinks.animate({ 'left': '0px' }, 1000);
                        $download.fadeIn(2500);
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',src);
                }
                setTimeout('$("a.st_img_download").attr("href", "image_download.php?image="+$(\'#st_main\').children(\'img:first\').attr("src"))', 500);
                });

Answer 1

if (video.paused) { 
     //show menu
}

jQuery视频暂停播放动画

1 个答案: