jquery/css - 彈出動畫

Question

我使用jQuery創建了一個動畫着陸頁。

在動畫中當鼠標懸停在圖像的一部分上（被切片）時，它會彈出。到目前爲止，只有將各部分的位置設置爲絕對，我才能夠做到這一點。如果它們不是絕對的，它們會在我放大並移出其中一個部分時移動。

有沒有辦法讓這個效果不需要絕對地位？

謝謝！

編輯：這是我使用

$(".block").mousemove(function() { 
    $(this).css("z-index", "1010"); 
    $(this).stop().animate({ 
     "width": "170px", 
     "height": "400px", 
     "top": "-12px", 
     "left": "-13px" 
    }, { 
     duration: 300, 
     easing: "swing", 
     queue: true 
    }); 
}); 

$(".block").mouseleave(function() { 
    $(this).stop().animate({ 
     "width": "149px", 
     "height": "374px", 
     "top": "0px", 
     "left": "0px" 
    }, { 
     duration: 500, 
     easing: "swing", 
     queue: true, 
     complete: function() { 
      $(this).css("z-index", "1000"); 
     } 
    }); 
}); 

Answer 1

一個解決你的問題可能是這樣的代碼：

現在每個圖像放在彼此的旁邊，對不對？相反，嘗試將白色塊放在另一個旁邊作爲佔位符以保留尺寸，然後將圖像放入這些框中。

我不知道您的實際html代碼，但我可以看到您在示例圖片中有六個塊。

下面我試圖用你給的腳本在一個非常簡單的html框架結構上設置懸停事件。在你的腳本中你有一些關於z-index的值，以及complete時發生的事情。我已經刪除了，因爲我無法理解它的含義，或者看到它與stop()一起工作，但您可以編輯它以符合您的意願。

此外，我不使用太多class或id，但可能需要在一個較大的頁面。 編輯：確保您的div具有與其包含的圖像完全相同的尺寸。

HTML

<div id="blocks"> 

    <!--The divs are the blocks - the imgs are the content--> 
    <div><img src="block1.png"></div> 
    <div><img src="block2.png"></div> 
    <div><img src="block3.png"></div> 
    <div><img src="block4.png"></div> 
    <div><img src="block5.png"></div> 
    <div><img src="block6.png"></div> 

</div> 

CSS

div#blocks { /*The wrapping box*/ 
    height: 200px; 
    width: 300px; 
    /*Remember to add paddings, margins, borders etc.*/ 
} 

div#blocks div { /*Creating the blocks*/ 
    position: relative; 
    float: left; 
    height: 200px; 
    width: 50px; 
} 

/*The images now fill nothing at all*/ 
div#blocks img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

的Javascript

$("div#blocks img").hover(

    function(){ /*On mousein*/ 
    $(this).stop().animate({ 

     "width": $(this).width() + 20, /*Enlarging by 20 x 20px*/ 
     "height": $(this).width() + 20, 
     "top": "-10px", /*Keeping image centeret*/ 
     "left": "-10px", 
     "z-index": "10" 

     }, { 

     duration: 300, 
     easing: "swing", 
     queue: true 

     }); 
    }, 
    function(){ /*On mouseout*/ 
    $(this).stop().animate({ 

     "width": $(this).width(), /*Returning to original size*/ 
     "height": $(this).width(), 
     "top": "0px", /*Keeping image centeret*/ 
     "left": "0px", 
     "z-index": "0" 

     }, { 

     duration: 500, 
     easing: "swing", 
     queue: true 

     }); 
    } 

); 

PS：未經檢驗的，但很簡單。你可以試試看。