Öğem, fare kabuğundan sonra neden küçülüyor?

Question

jQuery (ve web devinin kendisi) için yeniyim ve fareyle üzerine geldiğimde genişletmek için bir resim almaya çalışıyorum ve fareyi kaldırdığımda orijinal boyutuna geri dönüyorum. Ancak, elemanımın birkaç kez açıp kapaması durumunda neden küçülüp küçülmeye devam ettiğini bilmiyorum. Bunun olmasını nasıl engellerim? jsfiddle example

şimdiden teşekkür ederiz!

** #testDiv bir dairedir.

jQuery (function($) { 
 
    $('#testDiv').on('mouseenter',function() { 
 
     $(this).animate({ 
 
      height: "+=20px", 
 
      width: "+=20px", 
 
      borderRadius: "+=10px", 
 

 
     }).on('mouseleave', function() { 
 
      $(this).animate({ 
 
      height: "-=20px", 
 
      width: "-=20px", 
 
      borderRadius: "-=10px", 
 

 
      }); 
 
     }); 
 
    }); 
 
});

Answer 1

bu deneyin: Eğer mouseLeave olay birden çok kez tetikler görünüyor ve özellikleri olan birden çok kez konsol https://jsfiddle.net/m74262yb/2/

jQuery (function($) { 
 
    $('#testDiv').on('mouseenter',function() { 
 
    $(this).animate({ 
 
     height: "120px", 
 
     width: "120px", 
 
     borderRadius: "40px", 
 

 
    }).on('mouseleave', function() { 
 
     $(this).animate({ 
 
     height: "100px", 
 
     width: "100px", 
 
     borderRadius: "50px", 
 

 
     }); 
 
    }); 
 
}); 
 
});

bkz azaltır https://jsfiddle.net/m74262yb/1/

Eğer css geçişler deneyebilirsiniz:

css:

#testDiv{ 
    transition:all 0.5s; 
    width: 100px; 
    height: 100px; 
    border-radius: 50px; 
    border: 1px solid black; 
    background-color: gray; 
} 
#testDiv:hover { 

    width: 120px; 
    height: 120px; 
    border-radius: 60px; 
    border: 1px solid black; 
    background-color: gray; 
} 

https://jsfiddle.net/m74262yb/3/