I'm using an image map and when certain part of image is hovered it show div..(like in this website /) I want the div to appear with smooth transitions... here is my js code

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('.' + id).show();
            $('#'+ id).siblings().each(function() {
                if ($(this).is(':visible')) {
                    $(this).hide();
                }
            });
            $('#'+ id).show();
        } else {
            $('.' + id).hide();
            $('#'+ id).hide();
            $('#room-0').show();
        }
    }
};
$(function() {

    $('area').live('mouseover mouseout', function(event) {
        mapObject.hover($(this), event);
    });

});

Can anyone please suggest me the changes for smooth transitions... thanks in advance! :)

I'm using an image map and when certain part of image is hovered it show div..(like in this website http://jquery-image-map.ssdtutorials.com/) I want the div to appear with smooth transitions... here is my js code

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('.' + id).show();
            $('#'+ id).siblings().each(function() {
                if ($(this).is(':visible')) {
                    $(this).hide();
                }
            });
            $('#'+ id).show();
        } else {
            $('.' + id).hide();
            $('#'+ id).hide();
            $('#room-0').show();
        }
    }
};
$(function() {

    $('area').live('mouseover mouseout', function(event) {
        mapObject.hover($(this), event);
    });

});

Can anyone please suggest me the changes for smooth transitions... thanks in advance! :)

• javascript
• jquery
• html
• transition

• 1 live is very outdated. what version of jQuery are you using? – yuvi Commented Sep 21, 2014 at 18:11
• @yuvi jquery-1.6.4.min.js – newbie Commented Sep 21, 2014 at 18:13
• give your show() and hide() a transition duration like show(500) – Amin Jafari Commented Sep 21, 2014 at 18:15
• @AminJafari I want it to be shown for the time user's cursor is on that area! show(500) will make it disappear aftr 500 millsec. – newbie Commented Sep 21, 2014 at 18:17
• sorry I misunderstood! – Amin Jafari Commented Sep 21, 2014 at 18:22

3 Answers 3

So first of all, an unrelated tip - it would be a good idea to update jQuery a bit (if there isn't anything that depends on the old version you are using). live won't be available, instead you'll need to replace it with .on, but otherwise it's a good idea.

Secondly, sounds like all you're looking for is to give hide and show some transition. You can simply replace them with fadeIn() and fadeOut(). You can also use toggle which does it all at once (though might misbehave when used with a hover, because it will flip like crazy).

Here's a small snippet that shows you how they work:

$(document).ready(function() {
  

  var img = $('img');
  
  $('#show').on('click', function() {
   	 img.fadeIn();
  });
  
  $('#hide').on('click', function() {
    	img.fadeOut();
  });
  
  $('#toggle').on('click', function() {
  	img.fadeToggle();  
  });
  
  
});

* { font-family: sans-serif; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="show"> Show me! </button>

<button id="hide"> Hide me! </button>

<button id="toggle"> Toggle me! </button>

<br>
<br>
<img src="http://www.randomwebsite.com/images/head.jpg" />

Of course, those are just shortcut functions that use the .animate functionality, which is quite flexible on its own. Here's a link where you can read more about effects and animations in jQuery and how you can use them

Echoing what yuvi said, the 'live' function is deprecated.

I'm not sure why you have your hover function inside an object, but you could also do it like this, using fadeTo:

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('#'+ id).fadeTo(1000, 1.0);
        } else {
            $('#'+ id).fadeTo(1000, 0);
        }
    }
};

$(function() {
    $('.area').bind('mouseover mouseout', function(event){
         mapObject.hover($(this), event);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area" name="div1" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div class="area" name="div2" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div id="div1" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in One</div>
<div id="div2" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in Two</div>

function smooth(){
			if($("#show").is(":visible")){
				$("#show").hide("1000");
			}
			else{
				$("#show").show("1000");
			}
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href = "#" onclick = "smooth()">Click me</a><br><br>
<h1 id = "show">Shown!</h1>