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')
            })
        }
    }
})

这会检查图像是在页面中间还是在右边或左边，然后相应地将其打开。 .on只能返回一个操作，因此需要if else才能返回每个操作。我还在.css上使用了回调函数，这样图像在完全收缩之前就不会“平坦”。请随意在http://magic.cardbinder.com/

查看

谢谢Ghosh！

Answer 1

我认为可以用更简单的方式完成。尝试这样的事情......

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});
      });

使用jquery调整图像大小 - 延迟和移动

1 个答案: