Próbuję ustawić promień graniczny za element z animacją taką:

$(element).hover(function(){
    $(this).animate({borderRadius : 5});
}, function(){
    $(this).animate({borderRadius : 0});
});

Kiedy najeżyłem na elemencie, animacja będzie działać prawidłowo. Ale po unosieniu nie będzie działać z żadną animacją.

1
Majid Sadr 27 czerwiec 2017, 00:27

3 odpowiedzi

Najlepsza odpowiedź

W Firefoksie animacja nie działa na mocy. Użyj tutaj CSS zamiast JavaScript.

Ex: https://codepen.io/patdiola/pen/zyayde

button {
  background: blue;
  border: 0;
  color: white;
  padding: 10px 20px;
  transition: border-radius ease-in-out 500ms;
}

button:hover {
  border-radius: 10px;
}
2
Pat Diola 26 czerwiec 2017, 21:41

Przesadziłem twój kod trochę za skutek, ale wydaje się, że działa dla mnie.

$("div").hover(function(){
    $(this).animate({borderRadius : 30});
}, function(){
    $(this).animate({borderRadius : 0});
});
div{
  height: 70px;
  border: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
0
Steve0 26 czerwiec 2017, 21:33

Innym rozwiązaniem jest użycie jQuery-ui:

$(function() {
  $('#target').hover(function(){
      $(this).addClass('borderIn', 500);
  }, function(){
      $(this).removeClass('borderIn', 500);
  });
});
#target {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.borderIn {
  border-radius: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="target"></div>
1
Washington Guedes 26 czerwiec 2017, 21:53