我必须实现一个设计,其中div占视频iframe的15-20％(youtube video,vimeo等).当用户点击视频并且视频开始时,div应该向下滑动(为marginTop：0设置动画).然后,当用户再次点击视频以停止它时,div应该出现(marginTop：-100px).
这是我用来捕获iframe上的click事件并为div滑动动画的脚本.
jQuery(document).ready( function() {
var overiFrame = -1;
jQuery('iframe').hover( function() {
overiFrame = jQuery(this).closest('.video-container');
},function() {
overiFrame = -1
});
jQuery(window).blur( function() {
if( overiFrame != -1 )
jQuery('.header-container').animate({
marginTop: '0'
})
});
});
我不知道如何捕获iframe上的第二次单击并将div向上滑动.我尝试使用toggleClass但是在脚本添加类之后它不会删除它.
稍后编辑
我对脚本做了一些修改,但它仍然无法正常工作.它仅在用户在iframe上单击一次,在iframe外单击一次时才有效,依此类推.如果用户在iframe中多次单击,则动画不起作用.
jQuery(document).ready( function() {
var overiFrame = -1;
jQuery('iframe').hover( function() {
overiFrame = jQuery(this).closest('.video-container');
},function() {
overiFrame = -1
});
jQuery(window).blur( function() {
if( overiFrame != -1 ) {
if (jQuery('.header-container').hasClass('animate')) {
jQuery('.header-container').removeClass('animate')
} else {
jQuery('.header-container').addClass('animate')
}
}
});
});
这是我试图实现的设计的屏幕截图：