淡入/淡出JS鼠标悬停事件 [英] Fade in/out js mouseover event

问题描述

我希望在页面上实现菜单的鼠标悬停事件-

I am looking to implement a mouseover event on my page for a menu -

我在左边有3个标题，并在相应文本出现的右侧显示了相应的内容div.

I have 3 titles to the left with a respective content div on the right where the related text appears.

我已经遍历了所有论坛的有效js解决方案，我已经解决了:

Having trauled all the forums for a working js solution, I have settled with:

http://flowplayer.org/tools/demos/tabs/mouseover.html

使用非常简单的js函数:

which uses a very simple js function:

$("#products").tabs("div.description", {event:'mouseover'});

不过，我希望做的是合并fadeIn()和fadeOut效果，以便当用户将鼠标悬停在页面左侧的标题上时，显示的现有内容逐渐消失，相应的内容也会逐渐消失查看......

What I am hoping to do however, is to incorporate a fadeIn(), fadeOut effect so that when the user hovers over a title on the left of the page, the existing content showing fades away and the repective content will fade in to view......

html编码为:

<div id="products" >

<img src="home.png" alt="home" />

<img src="services.png" alt="services" /> 

<img src="contact.png" alt="contact" /> 

</div>

<div class="description" id="home" >
 .. content .. 
</div>

<div class="description" id="services" >
 .. content .. 
</div>

<div class="description" id="contact" >
 .. content .. 
</div>

我试图在此站点上合并线程5404775，但根本无法使其正常工作！

I have tried to incorporate thread 5404775 on this site but simply cannot get it working!

非常感谢任何帮助

推荐答案

我正在假设您希望人们将鼠标悬停在此处的图像按钮上，以使相应的div淡入和淡出.他们在该站点上所做的操作将无法正常工作，因为需要使用Javascript才能实现淡入淡出效果. jQuery使这变得容易. 我建议尝试类似的

I'm working off the assumption that you want people hovering over the image buttons here to make the corresponding divs fade in and out. What they are doing on that site will not work because Javascript is needed for the fading effect. JQuery makes this easy. I recommend trying something like

<script type="text/javascript">
oldSelected = "home"
$(document).ready(function(){
  $("#products img").mouseover(function(){
    $(".description").stop(true, true);
    var newSelected = $(this).attr("alt");
    $("#" + oldSelected).fadeOut('normal',function(){
      $("#" + newSelected).fadeIn();
    });
    oldSelected = newSelected
  });
});
</script>

我已经对此进行了测试，并且可以工作.您需要确保的一件事是，将div的css设置为在开始时不可见，除非您希望其中的一个可见，在这种情况下，该div的id应该是将oldSelected设置为在功能开始时.

I have tested this and it works. One thing you will want to make sure of is that the css for the divs has them set to not be visible at the start, unless you want one of them visible in which case the id for that div should be what you set the oldSelected to at the start of the function.

享受！

这篇关于淡入/淡出JS鼠标悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！