jQuery的動畫（），展開一個div

HTML：jQuery的動畫（），展開一個div

<div id="box0"><img src="http://s14.postimg.org/9x1nrefy5/A_Sunday_on_La_Grande_Jatte.png" id="pic0"></div> 
<div id="box1"><img src="http://s14.postimg.org/hbqzjs1tp/starry_night.png" id="pic1"></div> 
<div id="box2"><img src=http://s14.postimg.org/x7ftn2se5/mona_lisa.png" id="pic2"></div> 
<div id="box3"><img src="http://s14.postimg.org/k4k73t265/the_scream.png" id="pic3"></div>

CSS：

 * { 
      padding: 0px; 
      margin: 0px; 
      z-index: 0; 
     } 
     img { 
      position: relative; 
     } 
     div { 
      position: absolute; 
      overflow: hidden; 
      border: 8px solid #61260D; 
     } 
     #box0 {  /* A Sunday on La Grande Jatte */ 
      height: 150px; 
      width: 120px; 
      top: 300px; 
      left: 100px; 
     } 
     #pic0 { 
      left: -15px; 
      top: -15px; 
      height: 337px; 
      width: 500px; 
     } 
     #box1 {  /* Starry Night */ 
      height: 100px; 
      width: 400px; 
      top: 150px; 
      left: 100px; 
     } 
     #pic1 { 
      left: -35px; 
      top: -20px; 
      height: 300px; 
      width: 480px; 
     } 
     #box2 {  /* Mona Lisa */ 
      height: 150px; 
      width: 100px; 
      top: 190px; 
      left: 50px; 
     } 
     #pic2 { 
      left: -20px; 
      top: -20px; 
      height: 300px; 
      width: 198px; 
     } 
     #box3 {  /* The Scream */ 
      height: 200px; 
      width: 160px; 
      top: 60px; 
      left: 200px; 
     } 
     #pic3 { 
      left: -30px; 
      top: -20px; 
      height: 400px; 
      width: 314px; 
     }

的Javascript：

 var h = []; 
     var w = []; 
     var left = []; 
     var top = []; 
     var speed = 300; 

     for (var i = 0; i < 4; i ++) { 
      h[i] = $('#box'+i).css('height'); 
      w[i] = $('#box'+i).css('width'); 
      left[i] = $('#pic'+i).css('left'); 
      top[i] = $('#pic'+i).css('top'); 

     } 
     for (var i = 0; i < 4; i ++) { 
      $('div').hover(
       function() { 
        $(this).stop().css({'zIndex':'5'}).animate({ 
         height : $(this).children().css('height'), 
         width : $(this).children().css('width') 
        }, speed); 
        $(this).children().animate({ 
         left : '0', 
         top : '0' 
        }, speed); 
       }, 
       function() { 
        $(this).stop().css({'zIndex':'0'}).animate({ 
         height : h[i], 
         width : w[i] 
        }, speed); 
        $(this).children().animate({ 
         left : left[i], 
         top : top[i] 
        }, speed); 
       } 
      ); 
     }

當光標進入一個div我想要做的就是，div將展開爲圖像大小，嵌入的圖像將使用animate（）更改其位置。
它確實展開，但是，光標離開時，div不會恢復其原始大小。

Here is the demo

來源

2013-07-25 Thang

另一個問題：我不能用$（ '＃PIC' + i）和所以我用$（本）。兒童（）。所以爲什麼我不能使用它？這是一個錯誤？ – Thang

製備的工作搗鼓你： http://jsfiddle.net/U4nRq/1/

編輯： 要修復它，因此回報率的大小是不變的：

var speed = 300; 

    for (var i = 0; i < 4; i ++) { 
     $("#box" + i).attr("stored_h", $("#box" + i).css('height')); 
     $("#box" + i).attr("stored_w", $("#box" + i).css('width')); 
     $("#box" + i).attr("stored_left", $("#box" + i).children().css('left')); 
     $("#box" + i).attr("stor_top", $("#box" + i).children().css('top')); 
    } 

$('div').hover(
    function() { 
     $(this).stop().css({'zIndex':'5'}).animate({ 
      height : $(this).children().css('height'), 
      width : $(this).children().css('width') 
     }, speed); 
     $(this).children().animate({ 
      left : '0', 
      top : '0' 
     }, speed); 
    }, 
    function() { 
     $(this).stop().css({'zIndex':'0'}).animate({ 
      height : $(this).attr("stored_h"), 
      width : $(this).attr("stored_w") 
     }, speed); 
     $(this).children().animate({ 
      left : $(this).attr("stored_left"), 
      top : $(this).attr("stored_top") 
     }, speed); 
    } 
);

小提琴：http://jsfiddle.net/U4nRq/9/

來源

2013-07-25 13:42:29 Naoe

好的答案，但你錯過了「在你的第二個盒子（像OP），你也刪除了其中一個圖像... –

幹得好！但爲什麼我不能使用數組？ – Thang

Thang：你可以使用一個數組，但在這種情況下你並不需要，因爲你將懸停事件放在所有的div上，如果你不想這樣做，你仍然可以使用一個類，如果你想使用一個數組，必須把這個事件放在div id上（但它看起來很難看） – Naoe

你可以試試這個

$('div').hover(
    function() { 
     $(this).attr('data-width', $(this).width()); 
     $(this).attr('data-height', $(this).height()); 
     $(this).stop().css({'zIndex':'5'}).animate({ 
      height : $(this).children().css('height'), 
      width : $(this).children().css('width') 
     }, speed); 
     $(this).children().animate({ 
      left : '0', 
      top : '0' 
     }, speed); 
    }, 
    function() { 
     var w = $(this).attr('data-width'); 
     var h = $(this).attr('data-height') 
     $(this).stop().css({'zIndex':'0'}).animate({ 
      height : h, 
      width : w 
     }, speed); 
     $(this).children().animate({ 
      left : left[i], 
      top : top[i] 
     }, speed); 
    } 
);

DEMO.

來源

2013-07-25 13:45:58

jQuery的動畫（），展開一個div

回答

相關問題