Question

我正在使用旧的导航系统，该系统使用jquery + css扩展垂直菜单父项 - ＆gt;儿童。我想工作改变它使用animate而不是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>

到目前为止，我无法减少紧张情绪:(

谢谢你的帮助

Answer 1

有多种方法可以达到预期的效果。

如果您的课程更改了以下属性：

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

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

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

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

.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属性。

CSS3过渡的浏览器支持：http://caniuse.com/#feat=css-transitions
CSS3过渡的文档：https://developer.mozilla.org/en/CSS/transition
jQuery UI的文档.switchClass()：http://jqueryui.com/demos/switchClass/

Answer 2

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

在旧菜单上用css类缓存jquery

2 个答案: