首頁(yè) 猿問(wèn) 使用 .animate 淡出...

使用 .animate 淡出 .mouseout 的過(guò)渡？

Html5

夢(mèng)里花落0921 2024-01-11 17:29:27

我有一個(gè) div，當(dāng)你懸停時(shí)，另一個(gè) div 會(huì)出現(xiàn)。它們不是父/子或包裝的，所以我使用了一個(gè)腳本來(lái)讓它盡可能簡(jiǎn)單地工作并獲得我需要的東西。隨著 .mouseover ，懸停 div 慢慢出現(xiàn)，這就是我想要的。我的問(wèn)題是讓 .mouseout 使懸停 div 慢慢消失并保持消失。我嘗試過(guò)不同的變化，但最接近的是讓 div 慢慢消失，但在我設(shè)置的延遲后它會(huì)彈出。我對(duì)js很陌生，真的沒(méi)有任何經(jīng)驗(yàn)。我編寫了該代碼的第一部分，該代碼可以工作，但 .mouseout 是我遇到的問(wèn)題。這是我的代碼：$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });我知道這可能很簡(jiǎn)單，但我對(duì) js 不太了解。這是 HTML：<div id="show_stats1" class="stats"> main, visible div</div><div class="stat-1_info" style="visibility:hidden;"> hidden div to be shown on hover</div>這是一個(gè)jsfiddle https://jsfiddle.net/yt3h9xnf/

查看完整描述

1 回答

拉丁的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以將該.animate()方法與opacity或一起使用visibility。沒(méi)有理由同時(shí)使用兩者。

$("#show_stats1 h1").mouseover(function() {?

? $(".stat-1_info").animate({opacity: 1}, 200);

});

$("#show_stats1 h1").mouseout(function() {?

? $(".stat-1_info").animate({opacity: 0}, 200);

});

.stat-1_info {

? opacity: 0;

}

? ? <h1>main, visible div</h1>

</div>

? ? hidden div to be shown on hover

</div>

反對(duì) 回復(fù) 2024-01-11

搖曳的薔薇

TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊

fadeIn()通過(guò)使用andfadeOut()作為sec參數(shù)使其變得簡(jiǎn)單。這將照顧您想要看到文本并想要消失的時(shí)間。
使用display:none;現(xiàn)在市場(chǎng)上最新、最好的而不是使用visibility房產(chǎn)。

淡入（）

消退（）

$(document).ready(function() {

$("#show_stats1 h1").mouseover(function() {

$(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)

});

$("#show_stats1 h1").mouseout(function() {

$(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)

});

.stats_container {

width: 310px;

padding: 10px;

margin-bottom: 0px;

}

.stats {

width: 300px;

height: 34px;

margin: 15px 0px -3px 0px;

}

.stats h1 {

text-align: left;

}

.stats h2 {

position: absolute;

left: 260px;

margin-top: 8px;

width: 50px;

text-align: right;

}

.stats h1 {

display: inline-block;

font-weight: 400;

color: #000;

line-height: 9.5pt;

font-size: 9.5pt;

}

.stat-1_info {

top: -50px;

margin: 0px;

}

.stat-1_info {

float: right;

position: relative;

left: 0px;

display: inline-block;

width: 380px;

height: 334px;

background: red;

}

<h1>Strength:</h1>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam

ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.

</div>

反對(duì) 回復(fù) 2024-01-11