0

我正在使用一个较旧的导航系统，该系统使用 jQuery + CSS 来扩展垂直菜单的父级 -> 子级。我想将其更改为使用动画而不是 b/c 我想在翻转时添加填充+调整速度。

这是我希望转换的当前块：

jQuery('ul#nav-main-links > li.standby').mouseenter(function() {
    if (!jQuery(this).hasClass('selected')) {
     jQuery('ul#nav-main-links > li.exposed').attr('class', 'standby');
     this.className='exposed';
    }
});

菜单的当前 CSS

#inner-wrapper #nav-main #nav-main-links {
}
#inner-wrapper #nav-main #nav-main-links li {
  /*height:38px;*/
  margin-bottom:1px;/*width:181px;*/
}
#inner-wrapper #nav-main #nav-main-links li a {
  display:block;
  padding-right:13px;
  font:14px/38px 'TitilliumText14L800wt', Arial, sans-serif;
}
#inner-wrapper #nav-main #nav-main-links li a:link,
#inner-wrapper #nav-main #nav-main-links li a:visited {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 -38px;
  color:#292929;
  line-height:38px;
}
#inner-wrapper #nav-main #nav-main-links li a:hover,
#inner-wrapper #nav-main #nav-main-links li a:active {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 -76px;
  color:#292929;
}
#inner-wrapper #nav-main #nav-main-links li.selected a,
#inner-wrapper #nav-main #nav-main-links li.selected a:link,
#inner-wrapper #nav-main #nav-main-links li.selected a:visited,
#inner-wrapper #nav-main #nav-main-links li.selected a:hover,
#inner-wrapper #nav-main #nav-main-links li.selected a:active {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 0;
  color:#fff;
}
#inner-wrapper #nav-main #nav-main-links li.exposed a,
#inner-wrapper #nav-main #nav-main-links li.exposed a:link,
#inner-wrapper #nav-main #nav-main-links li.exposed a:visited,
#inner-wrapper #nav-main #nav-main-links li.exposed a:hover,
#inner-wrapper #nav-main #nav-main-links li.exposed a:active {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 -76px;
  color:#292929;
}
#inner-wrapper #nav-main #nav-main-links li ul {
  display:none;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul,
#inner-wrapper #nav-main #nav-main-links li.exposed ul {
  display:block;
  left:10px;
  position:relative;
  width:171px;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul li {
  border-bottom:1px solid #4f4f4f;
  margin-bottom:0;
}
#inner-wrapper #nav-main #nav-main-links li.exposed ul li {
  border-bottom:1px solid #adaaa2;
  margin-bottom:0;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul li a,
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:link,
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:visited {
  background-color:#000;
  background-image:none!important;
  font:12px/26px 'TitilliumText14L400wt', Arial, sans-serif;
}
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a,
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:link,
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:visited {
  background-color:#d0ccc3;
  background-image:none!important;
  color:#292929;
  font:12px/26px 'TitilliumText14L400wt', Arial, sans-serif;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:hover,
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:active {
  color:#eb5d21;
  background-image:none!important;
}

#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:hover,
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:active {
  color:#eb5d21;
  background-image:none!important;
}

这是我目前正在使用的内容：

<script>
$(document).ready(function(){  
    $('ul#nav-main-links > li.standby').mouseover(function() {
        if (!$(this).hasClass('selected')) {
            $(this).switchClass("standby","exposed",600)
        }
    });
    $('ul#nav-main-links > li.standby').mouseout(function() {
        if (!$(this).hasClass('selected')) {
            $(this).switchClass("exposed","standby",600);
        }
    });
});     
</script>

到目前为止，我无法减少紧张感。

4

2 回答 2

0

我根据 jquery 手风琴重新设计了菜单以使用此插件http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

于 2012-04-13T02:22:22.293 回答
0

有多种方法可以达到您想要的效果。

如果您的班级更改了以下属性：

.my-class {
    height      : 200px;
    width       : 200px;
    padding-top : 10px;
}

.animate()然后，您可以将属性及其值复制到调用中，而不是将此类添加到元素中：

$(SELECTOR).animate({
    height      : 200px,
    width       : 200px,
    padding-top : 10px
}, 500);

或者，您可以使用 CSS3 过渡来创建动画效果：

.my-class {
    height      : 200px;
    width       : 200px;
    padding-top : 10px;

    -webkit-transition : all 0.5s linear;
       -moz-transition : all 0.5s linear;
        -ms-transition : all 0.5s linear;
         -o-transition : all 0.5s linear;
            transition : all 0.5s linear;
}

这消除了对 JS 代码进行任何更改的需要，但它只适用于现代浏览器。

另一种选择是使用.switchClass()jQuery UI 函数，它可以动画化从一个类到另一个类的变化，这样您可以将 CSS 保存在样式表中，将 JS 保存在一个地方，并且仍然可以动画化 CSS 属性的变化。

于 2012-04-11T23:21:28.967 回答