Какой метод необходимо использовать в JS-коде, чтобы сделать появление блока плавным при наведении?

Question

[erudenok]

$('.portfolio-rhombs, .portfolio-rhomb').on( "mouseenter", function() {
        $(this).find('.portfolio-rhombs__view, .portfolio-rhomb__view').css({
            "display": "none"
        });
        $(this).find('.portfolio-rhombs__modal, .portfolio-rhomb__modal').css({
            "display": "block"
        });
    });
    $('.portfolio-rhombs, .portfolio-rhomb').on( "mouseleave", function() {
        $(this).find('.portfolio-rhombs__modal, .portfolio-rhomb__modal').css({
            "display": "none"
        });
        $(this).find('.portfolio-rhomb__view').css({
            "display": "block"
        });
        $(this).find('.portfolio-rhombs__view').css({
            "display": "grid"
        });
    })

Comments

[Froggyweb]

свойство display не анимируется на сss

[WbICHA]

Froggyweb, не совсем. Плавное появление сделать как раз просто, если ещё опасити приделать.

[Froggyweb]

WbICHA, опасити и sidplay none немного разные вещи

[WbICHA]

Froggyweb, и? Не вижу никаких ограничений в добавлении опасити.

[qqNemo]

чисто для идеи

Answer 1

[godsplan]

https://api.jquery.com/fadein/

Answer 2

[TheOnlyFastCoder2]

<div id="block">hover me</div>

function getHidden (hide , seconds , animation) {
  block.setAttribute('style',`
    width:100px; 
    height: 50px; 
   cursor:pointer;
    background: ${hide ? "red" : "none"}; 
    transition: ${seconds}s ${animation};
  `)
} 


block.addEventListener('mouseover' , () => getHidden(true,1,"ease-in") )
block.addEventListener('mouseout' , () => getHidden(false,1,"ease-out") )