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