Crossfade Image with Text с помощью jQuery on Hover

Question

OK Итак, у меня есть изображение, которое будет переходить на другое изображение при наведении. У меня также есть описательный текст для перекрестного скрещивания с другим текстом, который соответствует второму изображению. То, что у меня есть сейчас, ВИДЫ ЖИЗНИ, единственная проблема, с которой я сталкиваюсь, заключается в том, что она исчезает до нуля (CSS: Display-none - добавлено так, что второе изображение не появляется рядом с первым изображением ... Я ' я пытался пробиться по позициям, но пока: нет кубиков)

Кроме того, вокруг него, кажется, есть пятна, которые запускают функцию (перемещайте указатель) ... это почти так, как будто происходит какая-то обертка ?

В целом, я пробовал функцию show и hide (в отличие от fadeIn/fadeOut), и это не создавало мне проблем ... однако, это не давало мне желаемого эффекта.

$(".top").mouseenter(function() { 
 
    $(".bottom").fadeIn(); 
 
    $(".top").hide(); 
 
}); 
 

 
$(".bottom").mouseleave(function() { 
 
    $(".top").fadeIn(); 
 
    $(".bottom").hide(); 
 
});

.bottom { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img class="top" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG"> 
 
<img class="bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png"> 
 
<p class="top">Top Text</p> 
 
<p class="bottom">Bottom Text</p>

Answer 1

Вы почти есть. Первое, что делает переход сверхъестественным, - это то, что вы вызываете hide() вместо fadeOut(). Вы, вероятно, сделали это, чтобы на мгновение избежать наложения изображений друг на друга, как вы упомянули. Использование fadeOut() с абсолютным позиционированием - это путь в этом случае. Обратите внимание, что я перестроенный разметку немного, чтобы сделать его работу:

$(".top").mouseenter(function() { 
 
    $(".bottom").fadeIn(); 
 
    $(".top").fadeOut(); 
 
}); 
 

 
$(".bottom").mouseleave(function() { 
 
    $(".top").fadeIn(); 
 
    $(".bottom").fadeOut(); 
 
});

.top, .bottom { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.bottom { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="top"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG"> 
 
    <p>Top Text</p> 
 
</div> 
 
<div class="bottom"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png"> 
 
    <p>Bottom Text</p> 
 
</div>