Zurück nach oben Button verlängert Animationsdauer mit jedem Klick

Ich baute eine zurück nach oben Schaltfläche (CSS-Animation, jQuery Wegpunkt-Plugin zum Hinzufügen von Klassen und die zurück nach oben Skript), die fast funktioniert. Es verlängert jedoch den Animationsprozess, wenn Sie es mehr als einmal mit jedem neuen Klick verwenden, also bleibt das Fenster ganz oben hängen, selbst wenn die Animation beendet sein sollte. Ich weiß nicht, warum das passiert und ich habe bereits einige Tutorials und jQuery-Snippets für den Zurück zum oberen Knopf ohne Erfolg versucht.Zurück nach oben Button verlängert Animationsdauer mit jedem Klick

Darf jemand meine Geige anschauen, wo Sie das beschriebene Verhalten untersuchen können, um mir weitere Anweisungen zu geben, wie man das beheben kann oder warum dies geschieht?

Fiddle: https://jsfiddle.net/rshpqstf/2/

Javascript

/* Bottom Bar Behaviour */ 
jQuery(document).ready(function($) { 
    var waypoints = jQuery('.footer').waypoint({ 
    handler: function(direction) { 
    jQuery('.frame-bottom_down span').toggleClass('test', direction === 'down'); 
    jQuery('.frame-bottom_up span').toggleClass('test2', direction ==='down'); 
    jQuery('.js-frame-bottom, .frame-bottom_ttl').click(function(event) { 
     event.preventDefault(); 
     jQuery('html, body').animate({scrollTop: 0}, 700); 
     return false; 
     }) 
    }, 
    offset: '100%' 
    }); 
});

HTML

<body> 
<div class="main-placeholder"></div> 
<div class="footer"></div> 
<div class="frame-bottom" style="transform: matrix(1, 0, 0, 1, 0, 0);"> 
<a href="javascript:void(0)" class="js-frame-bottom frame-bottom_ttl"> 
    <p class="frame-bottom_down"> 
     <span>S</span><span>C</span><span>R</span><span>O</span><span>L</span><span>L</span> 
     <span>D</span><span>O</span><span>W</span><span>N</span> 
     </p> 
    <p class="frame-bottom_up"> 
     <span>P</span><span>A</span><span>G</span><span>E</span> 
     <span>U</span><span>P</span> 
     </p> 
    </a> 
    </div> 
</body>

CSS

body { 
background: #fff; 
} 

.main-placeholder { 
height:2000px; 
width: 100%; 
} 

.frame-bottom { 
z-index: 2000; 
height: 50px; 
position: fixed; 
width: 100%; 
left: 0; 
bottom: 0; 
text-align: center; 
color: #979797; 
background-color: #333; 
-webkit-transform-origin: 50% 100%; 
-ms-transform-origin: 50% 100%; 
transform-origin: 50% 100%; 
font-size: 16px; 
letter-spacing: .05em; 
line-height: 3.3; 
} 

.frame-bottom_ttl { 
display: block; 
position: relative; 
cursor: default; 
} 

.frame-bottom_up, .frame-bottom_down { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    } 

.frame-bottom_down span, .frame-bottom_up span { 
    display: inline-block; 
    color: #fff; 
    vertical-align: bottom; 
    transition: all .2s ease-in; 
    } 

.frame-bottom_down span { 
    opacity: 1; 
    transform: matrix(1, 0, 0, 1, 0, 0); 
} 

.frame-bottom_down span.test { 
    opacity: 0; 
    transform: matrix(1, 0, 0, 1, 0, 5); 
} 

.frame-bottom_up span { 
    transform: matrix(1, 0, 0, 1, 0, 5); 
    opacity: 0; 
    visibility: hidden; 
} 

.frame-bottom_up span.test2 { 
    opacity: 1; 
    transform: matrix(1, 0, 0, 1, 0, 0); 
    cursor: pointer; 
    visibility: visible; 
} 

.frame-bottom_down span.test:nth-child(1) { transition-delay: 0s; } 
.frame-bottom_down span.test:nth-child(2) { transition-delay: 0.02s;} 
.frame-bottom_down span.test:nth-child(3) { transition-delay: 0.04s; } 
.frame-bottom_down span.test:nth-child(4) { transition-delay: 0.06s; } 
.frame-bottom_down span.test:nth-child(5) { transition-delay: 0.08s; } 
.frame-bottom_down span.test:nth-child(6) { transition-delay: 0.1s; } 
.frame-bottom_down span.test:nth-child(7) { transition-delay: 0.12s; } 
.frame-bottom_down span.test:nth-child(8) { transition-delay: 0.14s; } 
.frame-bottom_down span.test:nth-child(9) { transition-delay: 0.16s; } 
.frame-bottom_down span.test:nth-child(10) { transition-delay: 0.18s; } 

.frame-bottom_up span.test2:nth-child(1) { transition-delay: .2s; } 
.frame-bottom_up span.test2:nth-child(2) { transition-delay: 0.22s; } 
.frame-bottom_up span.test2:nth-child(3) { transition-delay: 0.24s; } 
.frame-bottom_up span.test2:nth-child(4) { transition-delay: 0.26s; } 
.frame-bottom_up span.test2:nth-child(5) { transition-delay: 0.28s; } 
.frame-bottom_up span.test2:nth-child(6) { transition-delay: .3s; } 


.frame-bottom_down span:nth-child(1) { transition-delay: 0.12s; } 
.frame-bottom_down span:nth-child(2) { transition-delay: 0.14s; } 
.frame-bottom_down span:nth-child(3) { transition-delay: 0.16s; } 
.frame-bottom_down span:nth-child(4) { transition-delay: 0.18s; } 
.frame-bottom_down span:nth-child(5) { transition-delay: .2s; } 
.frame-bottom_down span:nth-child(6) { transition-delay: .22s; } 
.frame-bottom_down span:nth-child(7) { transition-delay: 0.24s; } 
.frame-bottom_down span:nth-child(8) { transition-delay: 0.26s; } 
.frame-bottom_down span:nth-child(9) { transition-delay: 0.28s; } 
.frame-bottom_down span:nth-child(10) { transition-delay: .3s; } 

.frame-bottom_up span:nth-child(1) { transition-delay: 0s; } 
.frame-bottom_up span:nth-child(2) { transition-delay: 0.02s; } 
.frame-bottom_up span:nth-child(3) { transition-delay: 0.04s; } 
.frame-bottom_up span:nth-child(4) { transition-delay: 0.06s; } 
.frame-bottom_up span:nth-child(5) { transition-delay: 0.08s; } 
.frame-bottom_up span:nth-child(6) { transition-delay: 0.1s; }

Quelle

2016-07-18 DoUtDes

Sie können Rad-EreignishandlerhinzufügenAnimation beim Radscrollen.

jQuery('.main-placeholder').on('mousewheel', function(event) { 
//console.log(event.deltaX, event.deltaY, event.deltaFactor); 
console.log(event); 
jQuery('html, body').stop(true); 
});

Bitte ein die Demo anschauen: https://jsfiddle.net/rshpqstf/3/

Quelle

2016-07-18 14:49:17

Hey Joey, vielen Dank für Ihre Hilfe! Können Sie bestätigen, dass dies auch für Firefox auf Firefox funktioniert? Während es scheint in Safari & Chrom zu arbeiten, kann ich nicht das gewünschte Ergebnis auf Firefox (offiziell + allabendlich) bekommen. Ich habe auch bemerkt, dass die Schaltfläche immer anklickbar ist, wenn Sie einmal darauf geklickt haben, also habe ich eine if-Anweisung zu jQuery hinzugefügt. Aber ich habe immer noch keinen Erfolg auf Firefox. Hier ist meine Geige mit Ihrer Idee (Danke nochmal!) Und die neue if-Anweisung: https://jsfiddle.net/rshpqstf/4/ – DoUtDes

Hallo, Sie müssen nur hinzufügen "DommouseScroll" -Ereignis für Firefox: Fenster. addEventListener ('DOMMouseScroll', Funktion (Ereignis) { //console.log(event.deltaX, event.deltaY, event.deltaFactor); jQuery ('html, body'). stop (true); }) ; –

bitte überprüfen: https://jsfiddle.net/rshpqstf/5/ –

Zurück nach oben Button verlängert Animationsdauer mit jedem Klick

Antwort

Verwandte Themen