0

私はJavaのコンパイルが得意ではありませんが、これは私が思いついた最高のものでした。

http://jsfiddle.net/p77wC/

次のスクリプトを単純化することを検討しています。

$('#about')
  .hover(function() {
    $('#bg_mask').stop().animate({ "height": "100px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", }, '1500');
  });

$('#blog')
  .hover(function() {
    $('#bg_mask').stop().animate({ "height": "180px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", },'1500');
  });
$('#contact')
  .hover(function() {
    $('#bg_mask').stop().animate({ "height": "250px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", },'1500');
  });

私がしていることを要約/単純化するために書くことができるifandelseステートメントがあると確信しています。

基本的にこれは私が探しているものです：

#aboutにカーソルを合わせると->animatewidth：x、＃blogにカーソルを合わせると-> animate width：xxなど、それ以外の場合-> animate width：40px

私は学びたいので、あなたがコードをコンパイルする気がなくても、あなたが私を正しい方向に向けたとしても、私は素晴らしいでしょう。

乾杯。

4

2 に答える 2

2 
function process(id, height) {  
  $("#" + id).hover(function() {
    $('#bg_mask').stop().animate({ "height": height + "px", }, '1500');
  }, function() {
    $('#bg_mask').stop().animate({ "height": "40px", }, '1500');
  });
}

process("about",   100);
process("blog",    100);
process("contact", 250);
于 2012-05-10T13:22:28.300 に答える
0

ここに、余分なコードを必要としないバージョンがあり、それぞれをループして、大まかな数学に基づいたアニメーションを提供します。

$('#menu_wrapper div:not(#bg_mask)').each(function(i) {
    $(this).data('animID',i-1);
    $(this).hover(function() {           
        $('#bg_mask').stop().animate({ "height": ((($(this).data('animID')*80)+100)-10)+"px" }, '1500');
      }, 
      function() {
            $('#bg_mask').stop().animate({ "height": "40px" },'1500');
      });
});

</ p>

フィドル

于 2012-05-10T13:36:39.963 に答える