我已经为我的网站找到了一个能够激活我的酒吧技能的功能。
这项工作,但在Chrome Inspector中,我看到宽度不会停止更改(它在屏幕上看不到,只在检查员中)。
这是我的JS代码:
def login():
print("====Login====")
userinfo={}
with open("userinfo.txt","r") as f:
for line in f:
(key,val)=line.split(':')
userinfo[key]=val.strip()
print(userinfo)
if __name__ == '__main__':
login()
这是我的HTML代码:
function launchSkills(){
$(document).ready(function() {
$('.bar span').hide();
// HTML5
$('#bar-one').animate({
width: '95%'
}, 1000);
// CSS3
$('#bar-two').animate({
width: '85%'
}, 1000);
// Javascript
$('#bar-three').animate({
width: '30%'
}, 1000);
// jQuery
$('#bar-four').animate({
width: '40%'
}, 1000);
// PHP
$('#bar-five').animate({
width: '40%'
}, 1000);
setTimeout(function() {
$('.bar span').fadeIn('slow');
}, 1000);
});
}
$(window).scroll(function(){
$('#skills').each(function(){
if(isVisible($(this), $(window))){
launchSkills();
};
});
});
你能看到问题吗?我尝试在" 1000)之后添加.stop()"但是动画没有用......
答案 0 :(得分:0)
主要问题是您没有考虑Array
(
[0] => Array
(
[extension] => 1000
[name] => Extension 1
)
[1] => Array
(
[extension] => 1001
[name] => Extension 2
)
)
持续发生的事实,但此处也存在其他一些问题。
window.scroll
此处不需要等待function launchSkills(){
$(document).ready(function() { // This is unnecessary. See (1) below
// animation code omitted
});
}
$(window).scroll(function(){ // This will fire continuously during scroll. See (2)
$('#skills').each(function(){ // This is unnecessary. See (3)
if(isVisible($(this), $(window))){ // See (4)
launchSkills();
};
});
});
事件,因为该函数是从document.ready
事件调用的 - 只能在文档准备好后触发。
scroll
事件持续触发,因此您在滚动事件的整个过程中反复调用scroll
,堆叠重复的动画。 (对于第二次迭代及其后,动画项目的宽度已经位于结束位置,因为第一次迭代离开它的位置;这就是视频中显示的动画仅覆盖子像素范围的原因。)你需要去除滚动事件或以其他方式强制它只发射一次。
只有一个元素具有ID"技能",所以没有理由在这里循环launchSkills
;这最多只匹配一个元素。
我假设当第一个参数中的元素在视口中时,.each
函数返回true?您可以将isVisible
直接传递给该函数,而不是在$('#skills')
内使用$(this)
。 (我不确定为什么第二个参数在那里是必要的,除非你将它用于给定代码中不明显的东西,否则它可能会被删除。)
最终结果可能如下所示:
.each()
如果function launchSkills(){
// animation code here, without the document.ready
}
/* the event namespace allows you to unbind that event without
affecting other functions also bound to window scroll. I've
used ".foo" here but it can be anything:
*/
$(window).on("scroll.foo", function(){
if(isVisible($('#skills'), $(window))){
launchSkills();
$(window).off("scroll.foo"); // stop firing after first successful run
};
});
在页面加载时在视口内有任何机会,您可以调用#skills
强制立即触发上述内容。请注意,如果执行此操作,将需要等待文档就绪(通过使用包含所有脚本的单个document.ready处理程序,或将脚本放在文档的末尾)。 )
答案 1 :(得分:-1)
这就是我用给定代码可以做的事情。
我在document.ready()
函数中包含了滚动事件监听器。同样从launchSkills()
中移除。
请查看下面的工作片段
function launchSkills(){
$('.bar span').hide();
// HTML5
$('#bar-one').animate({
width: '95%'
}, 1000);
// CSS3
$('#bar-two').animate({
width: '85%'
}, 1000);
// Javascript
$('#bar-three').animate({
width: '30%'
}, 1000);
// jQuery
$('#bar-four').animate({
width: '40%'
}, 1000);
// PHP
$('#bar-five').animate({
width: '40%'
}, 1000);
setTimeout(function() {
$('.bar span').fadeIn('slow');
}, 1000);
}
$(document).ready(function() {
$(window).scroll(function(){
launchSkills();
});
});
.bar{
background-color:blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<h4 class="text-center">Langages</h4>
<noscript style="position: absolute;top: 75px;left: 180px;">
Impossible d'afficher l'animation sans JavaScript.
</noscript>
</div>
<div class="row">
<div class="col-md-2">
<p>HTML5</p>
</div>
<div class="col-md-10">
<p>
<span id="bar-one" class="bar" style="width: 94.9995%; overflow: hidden;">s</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<p>CSS3</p>
</div>
<div class="col-md-10">
<p>
<span id="bar-two" class="bar" style="width: 85.0002%; overflow: hidden;">s</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<p>Javascript</p>
</div>
<div class="col-md-10">
<p>
<span id="bar-three" class="bar" style="width: 30.0009%; overflow: hidden;">s</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<p>jQuery</p>
</div>
<div class="col-md-10">
<p>
<span id="bar-four" class="bar" style="width: 39.9988%; overflow: hidden;">s</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<p>PHP</p>
</div>
<div class="col-md-10">
<p>
<span id="bar-five" class="bar" style="width: 39.9997%; overflow: hidden;">s</span>
</p>
</div>
</div>
</div>