鼠标悬停时闪烁文本
如何在 JavaScript 中消除鼠标悬停时闪烁的文本。我编辑了持续时间，但没有任何不同。在我看来一点也不顺利。我是一个相当新的 Web 开发人员，不确定 javascript 代码中的哪些内容需要正确编辑。顺便说一句，我想要实现的是，当页面首次加载时，文本将被隐藏，直到鼠标悬停，将显示 2 行，并且 onmouseout 文本将再次消失（闪烁文本始终出现在 onmouseover 时），然后当 onclick 时调用另一个函数，fancybox。
<script type="text/javascript">
$(document).ready(function(){
$(".msg-link").hover(
function(){
var id = $(this).data("id");
if(id!==undefined){
$("#" + id).show();
}
$("#textMessages").show();
},function(){
$("#textMessages").hide();
$(".hidden").hide();
});
});
function ShowHide() {
alert('here');
$("#textMessages").animate({
"height": "toggle"
}, {
duration: 1000
});
}
</script>
<div>
<img class="msg-link" data-id="test" src="1.png" alt="" />
<p id="textMessages">test<br />
<a class="hidden" id="test" href="1.png" rel="group1" title="example title text">More View</a>
<a class="hidden" id="koya" href="2.png" rel="group1" title="more text right here"></a>
</p>
</div>
How to get rid of blinking text on mouseover in javascript. I edited the number of duration but doesn't make any different. It doesn't look smooth to me at all. I'm quite a new web developer, not sure what in javascript code need to be edited it right. By the way what I want to achieve is when the page first load, the texts will be hidden until mouseover, 2 lines will be revealed and onmouseout texts will be disappeared again (blinking text appears at onmouseover all the time), then when onclick to call another function, fancybox.
<script type="text/javascript">
$(document).ready(function(){
$(".msg-link").hover(
function(){
var id = $(this).data("id");
if(id!==undefined){
$("#" + id).show();
}
$("#textMessages").show();
},function(){
$("#textMessages").hide();
$(".hidden").hide();
});
});
function ShowHide() {
alert('here');
$("#textMessages").animate({
"height": "toggle"
}, {
duration: 1000
});
}
</script>
<div>
<img class="msg-link" data-id="test" src="1.png" alt="" />
<p id="textMessages">test<br />
<a class="hidden" id="test" href="1.png" rel="group1" title="example title text">More View</a>
<a class="hidden" id="koya" href="2.png" rel="group1" title="more text right here"></a>
</p>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
听起来这是一个以动画为中心的问题，您想要平滑的显示/隐藏类型的动画吗？在我看来，你实际上应该使用 fadeIn 或 fadeOut 来获得最终的平滑度。但是你可以在 show() hide() 上设置时间（如果这是你真正喜欢的）..或者你可以结合淡入淡出和改变父元素的高度，这样它就会产生一点开放效果，但不会产生锯齿状缩放从左到下的效果。
(+) 在父 div 中添加了一个“id”，如果您费了很大力气才显示它，那么当您滚动图像时，您可能不希望链接消失。
我将谢尔曼先生的例子修改为我认为你想说的内容。我确信它可能会像您尝试做的那样更有活力。但这是我假设的动画或效果问题吗？正确的？
http://jsfiddle.net/SRLj9/9/
sounds like this was an animation focused questions you wanted a smooth show/hide type of animation? Imo You actually should use fadeIn or fadeOut for ultimate smootheness imo. but you can set the time on the show() hide() if that is what you really prefer.. or you can combine fadein and altering the height of the parent element so it gives a bit of an opening effect but not the jagged scaling from the left and down effect.
(+) added an "id" to the parent div you probably don't want the link disappearing when you scroll off the image if you went through all that effort to show it.
I modified mrtsherman's example to what I thought you were trying to say. I'm sure it could be a bit more dynamic as you were trying to do. BUT this was an animation or effect question I'm assuming? right?
http://jsfiddle.net/SRLj9/9/