2011-07-07 100 views
2

我使用jQuery創建了一個動畫着陸頁。 enter image description herejquery/css - 彈出動畫

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

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

謝謝!

編輯:這是我使用

$(".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"); 
     } 
    }); 
}); 
+0

你能否提供你想要實現的第二個模擬圖像?還有,到目前爲止比較的任何代碼? –

+0

@Brian Scott - 我編輯了這篇文章並添加了我使用的代碼。 –

回答

2

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

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

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

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

此外,我不使用太多classid,但可能需要在一個較大的頁面。 編輯:確保您的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:未經檢驗的,但很簡單。你可以試試看。

+0

我basiclly希望div我懸停在垂直和水平拉伸,並重疊兩側的切片。 –

+0

好的,可以通過在其上放置一個只有白色佔位符div的''來完成。佔位符div永遠不會改變其大小,但放置在相同座標的img可以放大或移動jQuery。 – Steeven

+0

謝謝你的回覆。我很抱歉,我沒有關注。你能編輯答案並詳細說明嗎? –