有一个清单。每个列表项都有一个click事件。当click事件被触发时（它们单击列表项），该信息将显示在html段落中。问题：每次单击新行时，整个段落在显示新信息之前消失。我怎样才能阻止这种情况发生？
var symbols = {
Horn: 'A horn in Bible prophecy is a king or kingdom Power and Strength: Daniel 7:24; 8:5, 21, 22; Zechariah 1:18, 19; Revelation 17:12',
Beast: 'Kingdom, government, political power: Daniel 7:23',
Bear: 'Destructive Power / Medo Persia: Proverbs 28:15; 2 Kings 2:23-24; Daniel 7:5',
Dragon: 'Satan or his agency: Isaiah 27:1; 30:6; Psalms 74:13,14; Revelation 12:7,9; Ezekiel 29:3; Jeremiah 51:34',
Black: 'Moral darkness, sin, apostasy: Exodus 10:21-23; Jeremiah 4:20-28; 8:21; Acts 26:18; John 12:35; Joel 2:1-10',
Wine: 'blood/covenant/doctrines: Luke 5:37, Isaiah 5:1-7',
Eyes: 'Spiritual Discernment: Matthew 13:10-17, 1 John 2:11',
Blood: 'Life: Leviticus 17:11; Deuteronomy 12:23',
Angel: 'Messenger: Daniel 8:16; 9:21; Luke 1:19,26; Hebrews 1:14',
Babylon: 'Religious apostasy/confusion: Genesis 10:8-10; 11:6-9; Revelation 18:2-3; 17:1-5',
Crowns: 'Kingship, victory: 1 Chronicles 20:2; 2 Kings 11:12; Ezekiel 21:26,27; James 1:12; 2 Timothy 4:7,8; 1 Corinthians 9:25',
Bow: 'Success in battle against evil: Psalms 7:11,12; Psalms 45:4,5',
Clothing: 'Character: Isaiah 64:6, Isaiah 59:6',
Cup: 'Meted out suffering and judgments: Psalms 11:6; Isaiah 51:12,22-23; Jeremiah 25:12-17; 49:12',
Day: 'Literal year: Ezekiel 4:6; Numbers 14:34',
Door: 'Opportunity/Probation: 2 Corinthians 2:12; Revelation 3:20; Luke 12:24, 25',
Dove: ' Holy Spirit: Mark 1:10',
Eagle: 'Speed, Power, vision, vengeance, protection: Deut 28:49; Habakkuk 1:6-8; Revelation 12:1-4',
EatingOfTheBook: 'Assimilating the message: Ezekiel 3:1-3; Jeremiah 15:16',
Egypt: 'Symbol of atheism: Exodus 5:2',
EyeSalve:'Holy Spirit to help us see truth, discernment to understand word, antidote for spiritual blindness: Ephesians 1:12-19; Psalms 119:18; I John 2: 20,27; John 16:7-13',
FaithfulWitness: 'Christ: John 18:37; John 3:11; Revelation 1:5; 3:14; 19:11',
FalseProphet: 'Apostate Protestantism: Revelation 16:13,14; 13:13,14; 19:20',
Famine: 'Dearth of Truth: Amos 8:11',
Feet: 'Your Walk / Direction: Genesis 19:2, Psalms 119:105',
Forehead: 'Mind: Romans 7:25; Ezekiel 3:8,9',
Fornication: 'Illicit connection between church and world: Ezekiel 16:15,26; Isaiah 23:17; James 4:4; Revelation 14:4',
FourBeastsOfLivingCreatures: 'Heavenly beings with special responsibilities: Revelation 5:8-10; 4:6-9; 6:1-7; 14:3; 15:7; 19:4',
FourCornersOfEarth: 'Four directions of compass: Jeremiah 49:36',
Fire: 'Holy Spirit: Luke 3:16',
FigTree: 'A Nation that should bear fruit: Luke 13:6-9',
Field: 'World: Matthew 13:38, John 4:35',
Fruit: 'Works / Actions: Galatians 5:22',
Garments: 'Covering of righteousness: Genesis 35:2; Isaiah 61:10; 52:1; Zechariah 3:3-5; Romans 13:14',
Gold: 'True riches of heaven, faith, scripture: Psalms 19:7-10; Galatians 5:6; James 2:5; Job 23:10; Isaiah 13:12',
Goat: 'Greece: Daniel 8:21',
Hand: 'Symbol of Deeds / Works / Actions: Ecclesiastes 9:10, Isaiah 59:6',
Harvest: 'End of World: Matthew 13:39',
Harlot: 'Apostate church/religion: Isaiah 1:21-27; Jeremiah 3:1-3; 6-9',
Heads: 'Major powers/rulers/governments: Revelation 17:3, 9, 10; Daniel 7:6; 8:8,22',
Healing: 'Salvation: Luke 5:23-24',
HiddenManna: 'Christ: John 6:49,50,53; Matthew 13:44',
Honey: 'happy life: Ezekiel 20:6, Deuteronomy 8:8-9',
Horse: 'Strength and Power in Battle Special representatives/angel: Job 39:19, Psalms 147:10, Proverbs 21:31; Exodus 15:21; Isaiah 43:17; Jeremiah 8:6 Zechariah 1:8-10; 6:1-8',
Image: 'A likeness: Exodus 20:4; Genesis 1:26; 5:3',
Incense: 'Prayers of God’s people: Psalms 141:2; Revelation 5:8',
Israel: 'True Followers of Christ: Romans 9:6-8; 2:28,29; Galatians 3:29',
JarVessel: 'Person: Jeremiah 18:1-4, 2 Corinthians 4:7',
Jezebel: 'Immorality, Idolatry, Apostasy: 1 Kings 21:25; 2 Kings 9:22',
Jordan: 'death: Romans 6:4, Deuteronomy 4:22',
KeyOfDavid: 'Power to open & close the sanctuary: Revelation 3:7-9; Isaiah 22:22',
Keys: 'Control/jurisdiction: Isaiah22:22; Matthew 16:19',
Lamb: 'Jesus/sacrifice: John 1:29; 1 Corinthians 5:7; Genesis 22:7,8',
Lamp: 'Word of God: Psalms 119:105',
LambsWife: 'New Jerusalem: Revelation 19:7-9; 21:2,9,10',
Lion: 'Jesus/Powerful King i.e. Babylon: Rev. 5:4-9, Jer. 50:43-44, Dan. 7:4,17,23',
Locusts: 'Destruction: Joel 1:4; Deuteronomy 28:38',
Leopard: 'Greece: Daniel 7:6',
LeprosySickness: 'Sin: Luke 5:23-24',
LordsDay: 'The Sabbath: Isaiah 58:13; Matthew 12:8; Exodus 20:10',
ManChild: 'Jesus: Psalms 2:7-9; Revelation 12:5',
Mark: 'Sign/Seal/mark of approval or disapproval: Romans 4:11; Ezekiel 9:4; Revelation 13:17; 14:9-11; 7:2, 3',
MeasuringRod: 'God’s Law God’s Word: James 2:10-12; Ecclesiastes 12:13,14 Isaiah 8:19,20; 2 Timothy 3:16,17',
Merchants: 'Advocates of Babylon’s teachings: Isaiah 47:11-15;Nahum 3:16; Revelation 18:3,11,15,23',
Moon: 'Permanence Moses’ system of types of sacrifices Psalms 89:35-37 Hebrews 10:1,11',
MorningStar: 'Jesus: Revelation 22:16',
Mountains: 'Political or religion-political powers: Isaiah 2:2, 3; Jeremiah 17:3; 31:23; 51:24, 25; Ezekiel 17:22, 23; Daniel 2:35, 44, 45',
MysteryOfGod: 'The gospel: Ephesians 1:9,10, 3:9, 6:19; Colossians 1:26,27',
NewJerusalem: 'The Holy city of Heaven: Revelation 3:12, 21:2',
Oil: 'Holy Spirit: Zechariah 4:2-6; Revelation 4:5',
OpenDoor: 'Unlimited Opportunity 1 Corinthians 16:9; Acts14:27; John 10:7-9 Hosea 2:15; Colossians 4:3',
Purple: 'Royalty: Mark 15:17, Judges 8:26',
Rainbow: 'Token of covenant keeping: Genesis 9:11-17',
Ram: 'Medo Persia: Daniel 8:20',
RedScarlet: 'Sin/corruption: Isaiah 1:18; Nahum 2:3; Revelation 17:1-4',
Reapers: 'Angels: Matthew 13:39',
Reins: 'Seat of will, affections: Psalms 7:9, 16:7, 26:2, 73:21; Proverbs 23:16; Jeremiah 17:10',
Ring: 'Authority: Genesis 41:42-43, Esther 3:10-11',
Rock: 'Jesus/truth: 1 Corinthians 10:4; Isaiah 8:13,14; Romans 9:33; Matthew 7:24',
Seal: 'Sign or mark of approval or disapproval: Romans 4:11; Revelation 7:2, 3',
Seed: 'Descendents / Jesus: Romans 9:8, Galatians 3:16',
SecondDeath: 'Lake of fire: Revelation 21:8; 20:2',
Serpent: 'Satan: Revelation 12:9; 20:2',
SevenCandleSticks: '7 candlesticks in Holy Place of Sanctuary Seven Churches Exodus 25:31-40; Revelation 1:20',
SevenHeads: 'Seven Political Powers: Revelation 17:9,10; Isaiah 2:2-4',
SevenLamps: 'Jesus, Word of God: John 9:5, 1:9; Psalms 119:105; Revelation 4:5',
Sickle: 'Symbol of Harvest-End of world: Matthew 13:39; Revelation 14:14',
Silver: 'Pure Words & Understanding: Proverbs 2:4, 3:13-14, 10:20, 25:11, Psalms 12:6',
Sodom: 'Moral degradations: Ezekiel 16:46-55; Jeremiah 23:14; Genesis 19:4-14',
Stars: 'Angels/messengers: Revelation 1:16, 20; 12:4, 7-9; Job 38:7',
Sun: 'Jesus/the gospel: Psalms 84:11; Malachi 4:2; Matthew 17:2; John 8:12; 9:5',
Skin: 'Christs righteousness: Exodus 12:5, 1 Peter 1:19, Isaiah 1:4-6',
Sword: 'Word of God Bloodshed, Destruction: Ephesians 6:17; Hebrews 4:12 Isaiah 3:25, 13:15; Acts 12:1,2; Jeremiah 48:2',
TestimonyOfJesus: 'Holy Spirit/ gift of prophecy: Revelation 19:10; 22:9; 1 Corinthians 13:2',
ThornsThornyGround: 'Ground Cares of this life: Mark 4:18-19',
Tongue: 'Language / Speech: Exodus 4:10',
Time: '360 Day (Literal Years): Daniel 4:16, 23, 25, 32; 7:25; Daniel 11:13 margin',
Times: '720 Days (Literal Years): Daniel 7:25, Revelation 12:6,14, 13:5; 11:1,2',
Trumpet: 'loud warning of Gods approach: Exodus 19:16-17, Joshua 6:4-5',
Tree: 'Cross; People / Nation: Deut. 21:22-23, Psalms 92:12, 37:35',
Torment: 'Test, prove by trial: 1 Corinthians 3:13; Hebrews 12:29; Isaiah 33:14',
TwoEdgedSword: 'God’s word: Ephesians 6:17; Hebrews 4:12; Matthew 10:34',
TwoWitnesses: 'Old and New Testaments: John 5:39, Zechariah 4:1-14; Psalms 119:130, 105; John 12:48',
Vineyard: 'Church that should bear fruit: Luke 20:9-16',
Waters: 'Inhabited Area-People/ Nations: Revelation 17:15',
Water: 'Holy Spirit / Everlasting Life: John 7:39, 4:14, Rev. 22:17, Eph. 5:26',
White: 'Purity: Revelation 12:9; 20:2',
WhiteRobes: 'Victory/righteousness Revelation 19:8; 3:5; 7:14',
Winds: 'Strife, Commotions, “winds of war” Jeremiah 25:31-33,49:36,37, 4:11-13; Zechariah 7:14',
Wings: 'Speed / Protection / Deliverance: Deuteronomy 28:49, Matthew 23:37',
WomanPure: 'True Church: Jeremiah 6:2; 2 Corinthians 11:2; Ephesians 5:23-27',
WomanCorrupt: 'Apostate church: Ezk. 16:15-58; 23:2-21; Hos. 2:5; 3:1; Rev. 14:4',
Wolf: 'Disguised Enemies that hunt in a time of darkness Matthew 7:15',
Wormwood: 'Sorrow/bitterness: Jeremiah 9:15, 23:15; Lamentations 3:19',
WrathOfGod: 'Seven Last Plagues: Revelation 15:1'
};
$('li').on('click', function(){
var symb = $(this).html();
if (Object.keys(symbols).indexOf(symb) > -1) {
console.log(symbols[symb]);
$('#symbolDef').html(symbols[symb]);
}
$('#symbolDef').fadeOut(0, function(){
$('#symbolDef').fadeIn(2500);
$('#symbolDef').html(symbols[symb]);
$("#symbolDef").css("font-size", "125%");
});
})
body {
background-image:url('https://images.pexels.com/photos/8892/pexels-photo.jpg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
}
#carved{
font-size:4em;
text-align:center;
-webkit-text-fill-color: #8A0707;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
text-shadow:2px 2px 5px lightblue;
}
.row {
display: flex;
justify-content: center;
}
.main-list {
text-align: center;
color: black;
background: black;
padding: 20px;
display: flex;
align-items: center;
flex-direction: column;
border-radius:15px;
border:1px solid #CBF1F1;
box-shadow:-10px 10px 20px black;
margin-top:30px;
}
.main-list h3 {
/* margin: 0 auto; */
text-shadow:-2px -2px 5px white;
box-shadow: inset 0 0 50px white;
border-radius:10px;
}
h3{
background-image:url('https://images.pexels.com/photos/164175/pexels-photo-164175.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
font-weight:bold;
width:200px;
transition:2s;
-webkit-text-fill-color: #8A0707;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
padding-bottom:6px;
}
h3:hover{
image:url('https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
-webkit-text-fill-color: #e60000;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
text-shadow: 2px 3px 10px black;
font-size:2.0em;
text-shadow: -2px 3px 10px white;
}
ul{
list-style-type: none;
height:300px;
width:300px;
overflow:auto;
box-shadow:10px 10px 25px black;
border-radius:15px;
background-image:url('https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
border:1px solid lightgrey;
}
li {
cursor: pointer;
margin-right:15px;
background-image:url('https://images.pexels.com/photos/164175/pexels-photo-164175.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
-webkit-text-fill-color: #8A0707;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
margin-bottom:5px;
border-radius:10px;
margin-top:5px;
transition-property: font-size;
transition-duration: 1s;
border-top:1px solid black;
border-bottom:1px solid black;
font-size:1.5em;
text-shadow:-2px -2px 2px white;
box-shadow: inset 0 0 50px white;
}
li:hover{
background-image:url('https://images.pexels.com/photos/164175/pexels-photo-164175.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
margin-bottom:5px;
margin-top:5px;
font-size:2em;
-webkit-text-fill-color: #e60000;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
text-shadow:-2px -2px 2px white;
box-shadow: inset 0 0 50px white;
}
p{
background-image:url('https://images.pexels.com/photos/164175/pexels-photo-164175.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
height:100px;
width:325px;
overflow:auto;
padding:10px;
border-radius:15px 0px 0px 15px;
padding-left:20px;
box-shadow: inset 0 0 150px white;
-webkit-text-fill-color: #8A0707;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
font-size:1.5em;
text-shadow:1px 1px 5px black;
border:1px solid black;
}
p:hover{
padding-left:20px;
background-image:url('https://images.pexels.com/photos/164175/pexels-photo-164175.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
border-radius:15px 0px 0px 15px;
text-shadow: 1px 1px 10px white;
box-shadow: inset 0 0 150px white;
}
.container{
margin-top:15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id = 'carved'>Bible Prophecy Decoder</h1>
<div id = 'skyDaddy' class="container">
<div class="row">
<div class="column main-list">
<h3 class="w3-display-middletop" style='margin-left:20px;'>Symbol List</h3>
<ul>
<li>Horn</li>
<li>Beast</li>
<li>Bear</li>
<li>Dragon</li>
<li>Black</li>
<li>Wine</li>
<li>Eyes</li>
<li>Blood</li>
<li>Angel</li>
<li>Babylon</li>
<li>Crowns</li>
<li>Bow</li>
<li>Clothing</li>
<li>Cup</li>
<li>Day</li>
<li>Door</li>
<li>Dove</li>
<li>Eagle</li>
<li>EatingOfTheBook</li>
<li>Egypt</li>
<li>EyeSalve</li>
<li>FaithfulWitness</li>
<li>FalseProphet</li>
<li>Famine</li>
<li>Feet</li>
<li>Forehead</li>
<li>Fornication</li>
<li>FourBeastsOfLivingCreatures</li>
<li>Fire</li>
<li>FigTree</li>
<li>Field</li>
<li>Fruit</li>
<li>Garments</li>
<li>Gold</li>
<li>Goat</li>
<li>Hand</li>
<li>Harvest</li>
<li>Harlot</li>
<li>Heads</li>
<li>Healing</li>
<li>HiddenManna</li>
<li>Honey</li>
<li>Horse</li>
<li>Image</li>
<li>Incense</li>
<li>Israel</li>
<li>JarVessel</li>
<li>Jezebel</li>
<li>Jordan</li>
<li>KeyOfDavid</li>
<li>Keys</li>
<li>Lamb</li>
<li>Lamp</li>
<li>LambsWife</li>
<li>Lion</li>
<li>Locusts</li>
<li>Leopard</li>
<li>LeprosySickness</li>
<li>LordsDay</li>
<li>ManChild</li>
<li>Mark</li>
<li>MeasuringRod</li>
<li>Merchants</li>
<li>Moon</li>
<li>MorningStar</li>
<li>Mountains</li>
<li>MysteryOfGod</li>
<li>NewJerusalem</li>
<li>Oil</li>
<li>OpenDoor</li>
<li>Purple</li>
<li>Rainbow</li>
<li>Ram</li>
<li>RedScarlet</li>
<li>Reapers</li>
<li>Reins</li>
<li>Ring</li>
<li>Rock</li>
<li>Seal</li>
<li>Seed</li>
<li>SecondDeath</li>
<li>Serpent</li>
<li>SevenCandleSticks</li>
<li>SevenHeads</li>
<li>SevenLamps</li>
<li>Sickle</li>
<li>Silver</li>
<li>Sodom</li>
<li>Stars</li>
<li>Sun</li>
<li>Skin</li>
<li>Sword</li>
<li>TestimonyOfJesus</li>
<li>ThornsThornyGround</li>
<li>Tounge</li>
<li>Time</li>
<li>Times</li>
<li>Trumpet</li>
<li>Tree</li>
<li>Torment</li>
<li>TwoEdgeSword</li>
<li>TwoWitnesses</li>
<li>Vineyard</li>
<li>Waters</li>
<li>White</li>
<li>WhiteRobes</li>
<li>Winds</li>
<li>Wings</li>
<li>WomanPure</li>
<li>WomanCorrupt</li>
<li>Wolf</li>
<li>Wormwood</li>
<li>WrathOfGod</li>
</ul>
</div>
</div>
<div class="row">
<div class="column">
<p onclick = ' myFunction()' class='w3-center'><span id='symbolDef'></span>Interpretation</p>
</div>
</div>
</div>
答案 0 :(得分：0)
这是因为代码的这一行$('#symbolDef').fadeIn(250);
执行动画的时间太长。当它开始淡入时，将执行下一个动画，直到完成上一个动画。
因此，当用户选择元素的项目，然后在2500毫秒之前快速选择另一个元素。新段落不断淡入，一旦完成就会再次淡入。
我建议减少时间的淡化。在用户选择列表中的另一项之前，减少足够的时间完成。让我们说chown nobody:nogroup -R /mongodata就够了
希望这有帮助：）
答案 1 :(得分：0)
不想动画吗？ 很难理解你的信息。 如果你想立即切换上下文使用：
$('li').on('click', function(){
var symb = $(this).html();
if (Object.keys(symbols).indexOf(symb) > -1) {
console.log(symbols[symb]);
$('#symbolDef').html(symbols[symb]);
}
$('#symbolDef').html(symbols[symb]);
$("#symbolDef").css("font-size", "125%");
})
答案 2 :(得分：0)
试试这个：
$('li').on('click', function(){
var symb = $(this).html();
$('#symbolDef').fadeOut('slow', function(){
if (Object.keys(symbols).indexOf(symb) > -1) {
console.log(symbols[symb]);
var div = $("<div id='symbolDef'>" + symbols[symb] + "</div>").hide();
$(this).replaceWith(div);
$('#symbolDef').css("font-size", "125%").fadeIn('slow');
}
});
})