javascript - 使用 jQuery 淡入？

Question

我正在尝试编写一个函数，以便当您将鼠标悬停在热点上时，X div 的内容会根据您所在的热点发生变化。

我一直在阅读 jQuery 的 fadeIn 函数，只是不确定我将如何实现它？

我已经尝试了以下但没有成功...

$(".texas").hover(
        function () {
            $(".description").fadeIn('slow').html("Texas");
        } 
    );

下面是我的原始代码...

  $(document).ready(function() {
    $(".uk").hover(
        function () {
            $(".description").html("Test Blah");
        } 
    );
    $(".singapore").hover(
        function () {
            $(".description").html("singapore");
        } 
    );
    $(".texas").hover(
        function () {
            $(".description").html("Texas");
        } 
    );
});

---

<div class="wrap">
        <div class="description">
            <span class="country">Singapore</span>
            <p>Temporibus autem quibusdam et aut officiis.</p><p>Debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </p>
        </div>
         <div class="map">
            <a href="#" class="circle uk">Manchester</a>
            <a href="#" class="circle singapore">Singapore</a>
            <a href="#" class="circle texas">Texas</a>
         </div>
    </div>

Answer 1

我不确定您的 HTML 究竟是什么样子，但我相信以下内容应该适合您:

$(".texas").hover(function(){
   $(".desc").html("texas").fadeIn();
});

你可以在这里查看 fiddle :

http://jsfiddle.net/gcArd/

更新:

根据您提供的 HTML，这个更新版本应该适合您:

$(".circle").mouseover(function(){
    var repText = $(this).text();
    $(".description").fadeOut(function(){
        $(".description").text(repText).fadeIn();
    });
});

http://jsfiddle.net/gcArd/2/