1

DIV.cb-toggleを作成しました。ユーザーがこのdivにカーソルを合わせると、オレンジにアニメーション化され、このdivにカーソルを合わせると、灰色に戻り、ユーザーがこのdivをクリックすると、青色にアニメーション化されます。選択されたユーザー。したがって、選択されていない場合は、mouseenter mouseleaveアニメーションがありますが、選択されている場合は、mouseenter mouseleaveのバインドを解除したいので、選択されているときにホバーイベントを機能させたくありません。選択されていない場合のみです。私が達成しようとしていることを行うための最良の方法は何ですか？私は以下のコードを思いついたが、これはそれを行うための恐ろしい方法であると確信しており、何をすべきかわからない。助けてくれてありがとう。

私のコード：

$('.cb-toggle').toggle(function() { 
      $(this).animate({"background":"blue", "color":"#fff;"});      
      $(".cb-toggle").unbind("click.myfadee");
   }, function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
      $('.cb-toggle').trigger('mouseenter');
   });
});

そして私はこれをバインドと呼んでいます：

$(".cb-toggle").bind("click.myfadee", function(){
      $(".cb-toggle").mouseenter(function() {
      $(this).animate({"background":"orange", "color":"#fff;"});
   }).mouseleave(function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
   });
});

背景色のアニメーションを維持する必要がありますが、jquery UIを使用していないため、クラス間でアニメーション化できません。

4

1 に答える 1

2

ご存知のとおり、CSSを少し使用すれば、これは簡単に実現できます。

CSS

.cb-toggle {
    background-color: gray;
    color: #fff;
}
.cb-toggle:hover {
    background-color: orange;
}
.cb-toggle.selected {
    background-color: blue;
}

HTML

<a href="#" class="cb-toggle">Toggle This</a>​

jQuery

$('.cb-toggle').click(function() {
   $(this).toggleClass('selected');
});​

デモ

これは単なる例であり、アニメーションを実行するために拡張できます。このリンクも必要かもしれません

アニメーションデモ付き

于 2010-09-21T02:18:44.367 に答える