我使用vimeo api在完成播放后将视频从屏幕上滑下来。在隐藏的视频播放器下方,我有一个图像说“重放”。虽然图像略大于播放器,但我希望通过css中的.hide()
或display: none
隐藏图像,然后在视频播放器的动画完成后显示它。
这是我的js:
$(document).ready(function() {
$(".vimeo-container img").hide();
$('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('finish', onFinish);
}
function onFinish(playerID) {
var player = "#" + playerID;
$(player).animate({width: "0%"}, 750, function() {
$(player).next("img").show();
});
}
});
所以第一行是隐藏图像。然后,当onFinish
功能完成时,我尝试show()
图像,但它不会起作用。我应该注意,当我扭转它并做:
$(player).next("img").hide();
它有效。
这是我的HTML:
%section#container1
.row.video-left
.large-8.columns
.vimeo-container
.flex-video.widescreen.vimeo
%iframe.vimeo#player1{allowfullscreen: "", frameborder: "0", height: "225", mozallowfullscreen: "", src: "http://player.vimeo.com/video/60122989?api=1&player_id=player1", webkitallowfullscreen: "", width: "400"}
= image_tag "behind1.png", class: "behind1"
和CSS:
.vimeo-container {
position: relative;
.behind1 {
margin-top: -27em;
}
我还尝试在css中设置display: none
,但这也无法正常工作。不确定我错过了什么。
感谢。
修改
function onFinish(playerID) {
var player = "#" + playerID;
$(player).animate({width: "0%"}, 750, function() {
console.log($(player));
$(player).next().show();
});
}
当我退出时($(玩家)它会返回:
当我退出console.log($(player).next());
时,它会退出我想要显示的图像。
答案 0 :(得分:2)
根据animate方法here的jQuery文档:
注意:与.slideDown()和.fadeIn()等速记动画方法不同,.animate()方法不会将隐藏元素作为效果的一部分显示。例如,给定$(" someElement")。haide()。animate({height:" 20px"},500),动画将运行,但元素将保持隐藏状态。
我在项目中有类似的需求,对我来说有用的是设置我想要隐藏的元素的z-index小于背景的z-index。然后,当我想要显示(或者,在你的情况下,动画)时,我可以将jQuery方法应用于元素,就像它们被隐藏一样(通过增加z-index使元素变得可见) ),但不会导致试图操纵隐藏元素的未定义行为。
另一种选择是通过负(x,y)坐标将元素从屏幕上移开并从那里开始工作。我不确定哪种视觉效果在您的用例中更具吸引力,但请提及它的完整性。