Z góry przepraszam za kiepski angielski. Niedawno napotkałem problem, którego nie mogę rozwiązać. Dokumentacja dla jQuery na nie dostarczyła mi niezbędnych informacji lub jestem po prostu głupi.
Mam kilka animacji, które powinny działać zgodnie z następującą zasadą: Jeśli kursor myszy znajduje się w górnej połowie ekranu, to pojawia się przycisk; jeśli na dole znika. Okazało się, że moja logika nie działa i dlatego warunek działa tylko raz po wejściu / przeładowaniu strony. Oznacza to, że animacja nie jest wykonywana dynamicznie kod:
$.fn.offsetAnimate=()=>{
$('#body').mousemove(e=>{
let offset=$('#body').offset();
let mouseY=(e.pageY-offset.top);
mouseY<=$('#body').height()/2?$.fn.fadeInTest():$.fn.fadeOutTest()
})
}
Taka jest moja logika. to moja niestandardowa animacja (2):
`$.fn.fadeOutTest=()=>{
$('.button').animate({
'width':'100px'
},1000,()=>{
})
console.log('check')
} `
$.fn.fadeInTest=(elem)=>{
$('.button').animate({
'padding':'0',
'width':'0%',
'transition':"all .3s linear"
},1600)
console.log('test')
}
Chcę zauważyć, że wartości w konsoli są zawsze wywoływane po przesunięciu myszy, ale same style zmieniają się tylko raz. Byłbym wdzięczny za każdą pomoc, dzięki
1 odpowiedź
Spróbuj tego, aby zapobiec tworzeniu się animacji. Naprawiłem również błąd składni w twoim kodzie
$.fn.offsetAnimate=()=>{
$('#body').mousemove(e=>{
let offset=$('#body').offset();
let mouseY=(e.pageY-offset.top);
mouseY<=$('#body').height()/2?$.fn.fadeInTest():$.fn.fadeOutTest()
})
}
$.fn.fadeOutTest=()=>{
if (!$('.button').hasClass('fade-out')){
$('.button').removeClass('fade-in').addClass('fade-out');
$('.button').animate({
'width':'100px'
},1000)
}
}
$.fn.fadeInTest=()=>{
if (!$('.button').hasClass('fade-in')){
$('.button').removeClass('fade-out').addClass('fade-in');
$('.button').animate({
'padding':'0',
'width':'0%',
'transition':"all .3s linear"
},1600)
}
}
$.fn.offsetAnimate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body id="body" style="height: 100vh">
<button class="button" styld="width: 0px">test</button>
</body>
</html>
Podobne pytania
Nowe pytania
jquery
jQuery to biblioteka JavaScript, rozważ także dodanie tagu JavaScript. jQuery to popularna biblioteka JavaScript działająca w różnych przeglądarkach, która ułatwia przechodzenie przez Document Object Model (DOM), obsługę zdarzeń, animacje i interakcje AJAX, minimalizując rozbieżności między przeglądarkami. Pytanie oznaczone tagiem jQuery powinno być powiązane z jQuery, więc jQuery powinno być używane przez dany kod i przynajmniej elementy związane z użyciem jQuery muszą znajdować się w pytaniu.