Ajuda na programação, respostas a perguntas / Jquery / como usar css Transition na exibição de bloco ao passar o mouse em bloco diferente? - jquery

como usar css Transition na exibição de bloco ao passar o cursor no bloco diferente? - jquery

HTML

<div class="onediv"><a href="">text</a></div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>

CSS

.nextdiv{display: none;}

JQUERY

$( ".onediv a" ).hover(function() {
$(".nextdiv").css({"display" : "block"});
});

$( ".onediv a" ).mouseleave(function() {
$(".nextdiv").css({"display":"none"});
});

Quando eu passar o mouse sobre o texto, .nextdiv será exibido. Agora, quero aplicar a transição quando esse .nextdiv for exibido. Agradeço antecipadamente.

Respostas:

2 para resposta № 1

$(".onediv").hover(function() {
$(this).next(".nextdiv").toggle("slow")
});

.nextdiv {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onediv"><a href="">text</a>
</div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>

<div class="onediv"><a href="">text1</a>
</div>
<div class="nextdiv">
<p>text1 text1 text1 text1 text1 text1 text1 text1.
</p>
</div>

<div class="onediv"><a href="">text2</a>
</div>
<div class="nextdiv">
<p>text2 text2 text2 text2 text2 text2 text2 text2.
</p>
</div>

Descrição: exibe ou oculta os elementos correspondentes.

Você pode usar .alternancia()
Mova o foco para div, não um

1 para resposta № 2

Ao invés de usar display:none, você pode usar outras técnicas para ocultar o elemento, como aplicar um negativo z-index para que a transição tenha efeito quando exibida:

$(".onediv a").hover(function() {
$(".nextdiv").addClass("show");
}, function() {
$(".nextdiv").removeClass("show");
});

.nextdiv {
position: absolute;
z-index: -999;
opacity: 0;
transition: all 1s;
}
.show {
position: static;
z-index: 0;
opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onediv"><a href="">text</a>
</div>
<div class="nextdiv">
<p>testing testing testing testing testing testing testing testingtesting.
</p>
</div>