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

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/

谢谢戈什！

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

​</p>