0
Ich habe ein Problem, ich habe Diagrammanimation, alles sieht ok aus aber ... Ich möchte, dass dieser Code nur einen Feuer auslöst, aber auf jeder Bildlauf nach unten oder oben Diagramm beginnen wieder. Schau, die Beschreibung der Prozente auf jeder Schriftrolle beginnt wieder. Ist die Option zum Auslösen dieses Codes nur zum ersten Scrollen? Vielen Dank für die HilfeFenster scrollen nur ein Feuer
$(window).scroll(function() {
if ($(this).scrollTop() >= $('.holder').offset().top) {
$('.bar').each(function(i) {
var $bar = $(this);
$(this).append('<span class="count"></span>')
setTimeout(function() {
$bar.css('width', $bar.attr('data-percent'));
}, i * 100);
});
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now) + '%');
}
});
});
}
})@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400, 400italic|Montserrat:400, 700);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
* {
box-sizing: border-box;
}
body {
color: #333;
-webkit-font-smoothing: antialiased;
font-family:"Montserrat", sans-serif;
padding: 2%;
}
.wrap {
width: 50%;
margin: 0 auto;
}
h1 {
font-family:"Montserrat", sans-serif;
font-weight: bold;
text-align: center;
font-size: 1.5em;
padding: .5em 0;
margin-bottom: 1em;
border-bottom: 1px solid #dadada;
letter-spacing: 3px;
text-transform: uppercase;
}
ul li {
line-height: 2;
font-weight: bold;
font-family:"Montserrat", sans-serif;
font-size: .85em;
text-transform: uppercase;
clear: both;
}
ul li:before {
content:"\2023";
padding: 0 1em 0 0;
}
.bar {
background: #e74c3c;
width: 0;
margin: .25em 0;
color: #fff;
position: relative;
transition: width 2s, background .2s;
clear: both;
}
.bar:nth-of-type(2n) {
background: #ed7669;
}
.bar .label {
font-size: .75em;
padding: 1em;
background: #3d3d3d;
width: 8em;
display: inline-block;
position: relative;
z-index: 2;
font-weight: bold;
font-family:"Montserrat", sans-serif;
}
.bar .label.light {
background: #575757;
}
.count {
position: absolute;
right: .25em;
top: .75em;
padding: .15em;
font-size: .75em;
font-weight: bold;
font-family:"Montserrat", sans-serif;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<h1>Animated Bar Graphs</h1>
<div class="holder">
<div class="bar cf" data-percent="85%"><span class="label">Photoshop</span>
</div>
<div class="bar cf" data-percent="75%"><span class="label light">Illustrator</span>
</div>
<div class="bar cf" data-percent="65%"><span class="label">Indesign</span>
</div>
<div class="bar cf" data-percent="90%"><span class="label light">HTML</span>
</div>
<div class="bar cf" data-percent="90%"><span class="label">CSS</span>
</div>
<div class="bar cf" data-percent="80%"><span class="label light">jQuery</span>
</div>
<div class="bar cf" data-percent="85%"><span class="label light">RWD</span>
</div>
<div class="bar cf" data-percent="75%"><span class="label">PHP</span>
</div>
<div class="bar cf" data-percent="80%"><span class="label light">WordPress</span>
</div>
<div class="bar cf" data-percent="70%"><span class="label">SASS/SCSS</span>
</div>
</div>
</div>
Diese durchschnittliche Lösung liegt daran, spanne noch wieder hinzugefügt wird und wieder. Dies ist sehr langsam Anwendung –
Und ich möchte, dass diese Schriftrolle wird nur ein Feuer –
@ V.R nein, es ist nicht immer wieder hinzufügen. Setzen Sie ein Konsolenprotokoll, bevor Sie span hinzufügen, und sehen Sie, wie oft die Zeile ausgeführt wird. siehe mein Update – Badiparmagi