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

目的の効果を実現するには、いくつかの方法があります。

クラスを変更すると、次のプロパティが変更されます。

.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コードを変更する必要がなくなりますが、最新のブラウザーでのみ機能します。

もう1つの方法は、.switchClass()あるクラスから別のクラスへの変更をアニメーション化するjQuery UI関数を使用することです。これにより、CSSをスタイルシートに、JSを1つの場所に保持し、CSSプロパティの変更をアニメーション化できます。

于 2012-04-11T23:21:28.967 に答える
0

jqueryアコーディオンに基づいてこのプラグインhttp://bassistance.de/jquery-plugins/jquery-plugin-accordion/を使用するようにメニューをやり直しました

于 2012-04-13T02:22:22.293 に答える