Question

我正在使用这两个功能来控制导航栏上单独的墨滴的高度。它正在工作，但我确信它可以写成一个功能......我只是不知道如何。提前感谢任何建议：

<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>

Answer 1

你在同一个上下文中使用$（this）不止一次，每次你使用jQuery函数$（）为同一元素浪费资源和时间。你应该把它变成一个变量，并从那一点开始引用变异。

var $this = $(this);

这也是两次使用：

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

应该是

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

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

Answer 2

如果不知道你的网页是什么样的话，我会选择这样的东西

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

Answer 3

据我所知，这两个函数之间只有几个不同的值。如果你真的想将这些重构为一个函数，你可以定义函数

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');
});

如有必要，您还可以添加更多参数。

Answer 4

尝试使用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/

Answer 5

只是概括，而不是检查准确性：

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');
});

Answer 6

这是一个重写版本，可以为您提供所需的内容：）

<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>

这个javascript可以更有效地编写吗？

6 个答案: