4

DIV.cb-toggleを作成しました。ユーザーがこのdivにカーソルを合わせると、オレンジにアニメーション化され、このdivにカーソルを合わせると、灰色に戻り、ユーザーがこのdivをクリックすると、青色にアニメーション化されます。選択されたユーザー。したがって、選択されていない場合は、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;"});
   });
});

背景色のアニメーションを維持する必要があります。フェードする必要があります。

4

2 に答える 2

2

次のように、スタイル設定にCSSを使用して、バインドを解除/再バインドせずにセットアップ全体を簡素化します。

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

次に、これを行うことができます：

$('.cb-toggle').click(function() {
  $(this).toggleClass("active");
});

このアプローチでは、すべてのスタイルや色などをCSSにオフロードすることもできます。つまり、色やその他のスタイルを微調整する場合は、JavaScriptを変更する必要はありません:)

または、IE6をサポートする必要がある場合は、次のように、クラス.live()を持つものだけでトリガーされるホバーのハンドラーを追加します。.active

$(".cb-toggle.active").live('mouseenter', function() {
  $(this).addClass('hover');
}).live('mouseleave', function() {
  $(this).removeClass('hover');
});

CSSが一致する場合：

.cb-toggle.active.hover { background: orange; }
于 2010-09-20T13:50:58.873 に答える
0

おそらく、選択したクラスを使用する必要があります。また、ここにある.css（）呼び出しは使用しないことをお勧めします。クラスを使用するだけです。

$(".cb-toggle").bind("click.myfadee", function(){
  $(this).toggleClass('selected');
});

$('.cb-toggle').toggle(function() {
  var $this = $(this);
  if ( $this.is('.selected') ) {
    $this.css({"background":"blue", "color":"#fff;"});      
  }
}, function() {
  var $this = $(this);
  if ( $this.is('.selected') ) {
    $this.css({"background":"gray", "color":"#fff;"});
  }
});
于 2010-09-20T13:51:53.030 に答える