jQuery的調整格框懸停

我有兩個代碼部分，使3件事情：jQuery的調整格框懸停

調整在同一時間只有6個.boxes DIV一個（與它的文本內容）
化妝未被選擇
顯示隱藏更多跨度透明.box的div的

CODE：

$('.content_area div').hide(); 

     $(function(){ 
      $('.box').bind('mouseover',function() { 
       $(this).addClass('up'); 
       $('.box').not('.up').fadeTo('normal',0.2); 
      }); 
      $('.box').bind('mouseout',function() { 
       $('.box').removeClass('up').fadeTo('normal',1); 
      }); 
     }); 

     initwidth = $('.box').width(); 
     initHeight = $('.box').height(); 

     $('.box').hover(function(){ 
      $(this).children('.more').show(); 
      $(this).stop().animate({width: '220', height: '140'},{queue:false, duration:'fast'}).css('font-size', '1.2em'); 
     }, function(){ 
      $(this).children('.more').hide(); 
      $(this).stop().animate({width: initwidth, height: initHeight},{queue:false, duration:'fast'}).css('font-size', '1em'); 
     });

但有些事情是錯誤的。只有第一個盒子工作得很好，但是當調整大小時，它並不掩蓋其他盒子。

它你可以在這裏看到

效果：jsFiddle

我的問題：是否有可能，統一的代碼，使其工作？： - [

來源

2011-04-18 cachaito

您的代碼非常混亂。我看起來像你拼湊在一起。 Unfortuantly沒有清理乾淨，爲你的時間，所以這裏有一些一般提示：

對於一個.hover()不完全一樣的約束力都mouseover和mouseout，讓您的箱子不必要有兩個處理程序的同樣的事件。另外，你在文檔就緒事件中綁定了一個，而另一個則沒有，這是不一致的。
您需要將stop() s添加到調光和（不）調光動畫，因爲您的排隊和繼續前進。請閱讀documention，因爲您最需要設置clearQueue和jumpToEnd參數。
箱子因爲漂浮而移位。使用絕對定位，而不是（注意它的缺點！）

更新：我已經編輯您的代碼：http://jsfiddle.net/Puuxj/7/

我的變化：

刪除了類hover和使用改爲.not(this)。（除非需要別的類別...）
將參數添加到.stop()。
使用mouseenter/mouseleave而不是mouseover/mouseout。
定位元素絕對

來源

2011-04-18 14:57:37 RoToRa

你很好。 Eveything就像一個魅力。謝謝你的幫助！ – cachaito 2011-04-19 19:57:17

這個效果很好，但是有沒有辦法讓其他盒子的尺寸變小，因爲盒子變大了？ – Tom 2011-07-13 20:38:08

jQuery的調整格框懸停

回答

相關問題