0 
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返すことができるアクションは1つだけなので、if else各アクションを返すために必要です。.cssまた、画像が完全に縮小するまで画像が「フラット」にならないように、コールバック関数を使用しました。http://magic.cardbinder.com/でお気軽にチェックしてください。

ありがとうGhosh！

4

1 に答える 1

0

もっと簡単な方法でできると思います。

このようなことを試してください.....

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>

于 2012-10-19T20:02:50.253 に答える