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

0
SkyH1gh 19 grudzień 2019, 22:33

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>
0
hydra 19 grudzień 2019, 23:44
Jesteś niesamowity. Zadziałało. Jestem Ci niesamowicie wdzięczna :)
 – 
SkyH1gh
20 grudzień 2019, 00:25