可以更有效地寫入此JavaScript嗎？

我正在使用這兩個函數來控制導航欄上單獨滴的高度。它正在工作，但我確定它可以寫成一個函數......我只是不知道如何。在此先感謝您的任何建議：可以更有效地寫入此JavaScript嗎？

<script type="text/javascript"> 
function nav() { 
    $('.nav li').hover(function() { 
    $(this).find('ul.item1_sub').show(); 
    $(this).find('ul.item1_sub').stop().animate({ 
     height: '145px', 
     opacity: '100' 
    }, { 
     queue: false, 
     duration: 200, 
     easing: 'easeInSine' 
    }) 
    }, function() { 
    $(this).find('ul.item1_sub').stop().animate({ 
     height: '0px', 
     opacity: '0' 
    }, { 
     queue: false, 
     duration: 100, 
     easing: 'easeInCirc' 
    }) 
    }); 
}; 
$(document).ready(function() { 
    nav(); 
}); 

function nav2() { 
    $('.nav li').hover(function() { 
    $(this).find('ul.item2_sub').show(); 
    $(this).find('ul.item2_sub').stop().animate({ 
     height: '170px', 
     opacity: '100' 
    }, { 
     queue: false, 
     duration: 200, 
     easing: 'easeInSine' 
    }) 
    }, function() { 
    $(this).find('ul.item2_sub').stop().animate({ 
     height: '0px', 
     opacity: '0' 
    }, { 
     queue: false, 
     duration: 100, 
     easing: 'easeInCirc' 
    }) 
    }); 
}; 
$(document).ready(function() { 
    nav2(); 
}); 
</script>

來源

2011-06-22 david

我會像這樣的東西去不知道你的頁面看起來像

$(function() { 
    $('.nav li').hover(function(){ 
    $(this).find('ul.item1_sub, ul.item2_sub').slideDown(); 
},function(){ 
    $(this).find('ul.item1_sub, ul.item2_sub').slideUp(); 
});   
});

來源

2011-06-22 20:55:06

....複製貓:-P，你改變烏爾答案 – Neal

我做了它的一部分。然後我感覺不好。咩。然後另外5人寫了答案。好吧。 :) –

使用jQuery的slideUp和slideDown，而不是另起爐竈嘗試什麼。

$(document).ready(function() { 

    $('.nav li').hover(function(){ 
     $(this).find('ul.item1_sub, ul.item2_sub').slideDown(); 
    },function(){ 
     $(this).find('ul.item1_sub, ul.item2_sub').slideUp(); 
    }); 

});

小提琴：http://jsfiddle.net/maniator/Laa7G/

來源

2011-06-22 20:55:40 Neal

您正在使用同一個上下文$（本）一次以上，每次使用jQuery函數$（）爲您浪費資源和時間相同的元素。你應該把它粘在一個變量上，並從這個點開始引用變量。

var $this = $(this);

而且這個使用了兩次：

$(this).find('ul.item2_sub')

應該

var $this = $(this); 
var $items = $this.find('ul.item2_sub'); 

$items.show(); 
$items.stop().animate();

來源

2011-06-22 20:55:59

只是一般化，沒有檢查的準確性：

function nav(item, height){ 
$('.nav li').hover(function() { 
$(this).find(item).show(); 
    $(this).find(item).stop().animate({height:height, opacity: '100'},{queue:false, duration:200, easing: 'easeInSine'}) 
     }, function() { 
    $(this).find(item).stop().animate({height: '0px',opacity: '0'},{queue:false, duration:100, easing: 'easeInCirc'}) 
     }); 
    }; 
    $(document).ready(function() { 
    nav('ul.item1.sub, '145px'); 
    nav('ul.item2.sub', '170px'); 
});

來源

2011-06-22 20:56:36

只有幾個值兩者f不同盡我所能看到。如果你真的想重構這些成一個功能，您可以定義功能

function nav(item, height) { 
    $('.nav li').hover(function() { 
    $(this).find(item).show(); 
    $(this).find(item).stop().animate({ 
     height: height, 
     opacity: '100' 
    }, { 
     queue: false, 
     duration: 200, 
     easing: 'easeInSine' 
    }) 
    }, function() { 
    $(this).find(item).stop().animate({ 
     height: '0px', 
     opacity: '0' 
    }, { 
     queue: false, 
     duration: 100, 
     easing: 'easeInCirc' 
    }) 
    }); 
};

然後用適當的參數

$(document).ready(function() { 
    nav('ul.item1_sub', '145px'); 
    nav('ul.item2_sub', '170px'); 
});

稱它爲你也可以在必要時增加更多的參數。

來源

2011-06-22 21:05:49 shelman

謝謝大家！這現在更有意義了。 – david

這裏是一個重寫的版本，應該給你你想要什麼:)

<script type="text/javascript"> 

function onMouseOver() { 
    var self = $(this), 
     item1_sub = self.find('ul.item1_sub'), 
     item2_sub = self.find('ul.item2_sub'), 
     animOptions = { queue: false, duration: 200, easing: 'easeInSine' }; 

    item1_sub.show().stop().animate({ height: '145px', opacity: '100' }, animOptions); 
    item2_sub.show().stop().animate({ height: '170px', opacity: '100' }, animOptions); 

} 

function onMouseOut() { 
    $(this).find('ul.item1_sub, ul.item2_sub').stop().animate({ height: '0px', opacity: '0' }, { queue: false, duration: 100, easing: 'easeInCirc' }); 
} 


function onDomReady() { 
    $('.nav li').hover(onMouseOver, onMouseOut); 
} 


$(onDomReady); 

</script>

來源

2011-06-22 21:18:56

可以更有效地寫入此JavaScript嗎？

回答

相關問題