Question

var hover_effect;
$(document).on("hover", ".card", function (evt) {
    windowWidth = $(window).width();
    var id = $(this).attr('id');
    var offset = $(this).offset();
    var pos = offset.left;

    if (windowWidth - pos < 350) {
        if (evt.type === "mouseenter") {
            hover_effect = setTimeout(function(){
                $('#'+id).css('z-index', '9').animate({
                    marginLeft: '-120',
                    width: '360px',
                    height: '510px'
                }, 300);
            } , 700);
            } 
        else { // mouseleave
            clearTimeout(hover_effect);
            $('#'+id).animate({
                marginLeft: '0',
                width: '240px',
                height: '340px'
            }, 300, function() {
                $('#'+id).css('z-index', '1')
            })
        }
    }
    else if (pos < 260) {
        if (evt.type === "mouseenter") {
            hover_effect = setTimeout(function(){
                $('#'+id).css('z-index', '9').animate({
                    width: '360px',
                    height: '510px'
                }, 300);
            } , 700);
            } 
        else { // mouseleave
            clearTimeout(hover_effect);
            $('#'+id).animate({
                width: '240px',
                height: '340px'
            }, 300, function() {
                $('#'+id).css('z-index', '1')
            })
        }
    }
    else{
        if (evt.type === "mouseenter") {
            hover_effect = setTimeout(function(){
                $('#'+id).css('z-index', '9').animate({
                    marginLeft: '-60',
                    width: '360px',
                    height: '510px'
                }, 300);
            } , 700);
            } 
        else { // mouseleave
            clearTimeout(hover_effect);
            $('#'+id).animate({
                marginLeft: '0',
                width: '240px',
                height: '340px'
            }, 300, function() {
                $('#'+id).css('z-index', '1')
            })
        }
    }
})

This checks to see if an image is in the middle of the page, or the right or left, then blows it up accordingly. .on can only return one action, so the if else is needed to return each action. I also used the callback function on the .css so that the image wouldn’t go “flat” until it had shrunk completely. Feel free to check it out at http://magic.cardbinder.com/

Thanks Ghosh!

Answer 1

I think it can be done in a more simplier way.

Try something like this …..

http://jsfiddle.net/35vYZ/

HTML

<div class="wrapper">
<div class="pics"></div>
<div class="pics"></div>
<div class="pics"></div>
<div class="pics"></div>
</div>

CSS

.pics {
width: 50px;
height: 50px;
background: blue;
float: left;
margin: 5px;
}
.wrapper {
overflow: auto;
background: green;
float: left;
}​

Jquery

var hover_effect;
$('.pics').hover( function(){
var pics = $(this);
hover_effect = setTimeout(function(){pics.animate({'width' : '60px', 'height' : '60px'}, 300);} , 500);
     }, 
     function(){
         clearTimeout(hover_effect);
         $(this).animate({'width' : '50px', 'height' : '50px'}, {duration: '300', queue: false});
      });

​