javascript - jQuery video onpause play animation -
i building site has thumbnail based navigation , large image or video background. see here http://www.sarahnwatson.com.
right have if click on video navigation menu animates out of way can see video better. want make on pause menu animates in.
here code
//clicking on thumb, replaces 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 li elements within $list $(el).delay(500*i).animate({'left':'-300px'},1000); }); }); $("video").bind("pause", function() { $list.children().each(function(i,el) { // loop through 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); });
if (video.paused) { //show menu }
Comments
Post a Comment