使用 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();
});

您可以在此处查看小提琴：

http://jsfiddle.net/gcArd/

更新：

根据您提供的 HTML，此更新版本应该适合您：

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

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

Answer 2

我认为这会让你最接近你想要实现的目标。

http://jsfiddle.net/fXTbf/

您不希望鼠标悬停时出现淡入淡出效果已经显示的元素。接下来，您可以绑定到圆圈类，而不是单个位置类。

$('.circle').bind('mouseover', 
    function () { 
        //if element is already active don't fade it in
        if ($(this).hasClass('active')) { return; }

        //remove active class from old and add to new
        $('.active').removeClass('active');
        $(this).addClass('active');     

        //fade out text, change it, and then fade in new value  
        $('.description span').fadeOut('slow', function () {
            $(this).html($('.active').html()).fadeIn('slow');
        });

    }
);

Answer 3

您需要一个 div 或某个容器来存放 .description 的每个可能的内容。这样，你就可以这样做：

$(".texas").hover(
        function () {
            $(".ukDescription").fadeOut();
            $(".singaporeDescription").fadeOut();
            $(".texasDescription").fadeIn('slow');            
        } 
    );

Answer 4

这是基于 Abe Miesser 的回答。我认为从视觉上来说，它实际上没有那么迟钝。

$(".circle").hover(function(){
   var self = $(this);
   if($(".description").text() != self.text()) {
       $(".description").fadeOut(function(){
           $(this).text(self.text()).fadeIn(); 
       })
   }
}, function(){
    $(".description").fadeOut(function(){
        $(this).text('');
    });
});

http://jsfiddle.net/y6Dp4/