CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

FadeIn with jQuery?

Im trying to write a function so that when you hover over a hotspot the content of X div changes depending on what hotspot you're on.

I've been reading up on jQuery's fadeIn function only im unsure how I'd go about implementing it?

I've tried the below with no luck...

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

And below is my original code...

  $(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>

Upvotes: 2

Views: 167

Answers (4)

mrtsherman
mrtsherman

Reputation: 39872

I think this gets you the closest to what you are trying to achieve.

http://jsfiddle.net/fXTbf/

You don't want the fade effect to occur when you mouse over an already shown element. Next, you can bind to circle class as opposed to individual location classes.

$('.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');
        });

    }
);

Upvotes: 0

Leo
Leo

Reputation: 5276

This is based on Abe Miesser's answer. I thinks it's actually a lot less sluggy, visually speaking.

$(".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/

Upvotes: 0

Abe Miessler
Abe Miessler

Reputation: 85036

I'm not sure exactly what your HTML look like but I believe the below should work for you:

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

You can view the fiddle here:

http://jsfiddle.net/gcArd/

UPDATE:

Based on the HTML you posed this updated version should work for you:

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

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

Upvotes: 3

daniloquio
daniloquio

Reputation: 3902

You need a div or some container for each of the possible contents of .description. In that way, you could do this:

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

Upvotes: 0

Related Questions