1

以下のコードは div (#feedback-form-container) をアニメーション化してスライドインおよびスライドアウトさせ、クリックすると画面の中央にジャンプし、これらのスライド アニメーションがオフになります。div 内のフォームが送信され、フォームが元の場所に戻ったら、これらのアニメーションを再び有効にしたいのですが、これは機能しません。これに on() を使用しようとしていますが、成功していません。誰でも問題を見つけることができますか? 私は困惑しています。

/////////////////////feedback form animation//////////////////////
jQuery(document).ready(function($) {
  //find center of screen
  var $screenwidth = $(window).width();
  var $screencenter = $screenwidth / 2 - 177;
  var $startpos = $screencenter + 260;
  var overlay = jQuery('<div id="simpleoverlay"> </div>');

  //hover to slide functions
  $('div#feedback-form-container').hover(function() {
    $('div#feedback-form-container').animate({
      left: '+=260px'
    },
    '2000');
  },

  function() {
    $('div#feedback-form-container').animate({
      left: '-=260px'
    },
    '6000');

  });
  //click to slide to center of screen
  $('div#feedback-form-container').click(function() {
    $('div#feedback-form-container').animate({
      left: '+=' + $screencenter
    },
    {
      duration: '2000',
      easing: 'swing',
      complete: setTimeout(function() {
        overlay.appendTo(document.body)
      },
      500)
    });

    //unbind functions
    if ($('div#feedback-form-container').is(':animated')) $('div#feedback-form-container').off('click').off('hover');
    //set cursor back to default
    $('div#feedback-form-container').css('cursor', 'default');

  });

  $('#wpcf7-f52-t1-o1').submit(function() {

    $('div#feedback-form-container').animate({
      left: '-=' + $startpos
    },
    '6000');

    $('div#feedback-form-container').on('hover').on('click');
  });
4

1 に答える 1

5

onメソッドとメソッドはoff、やや紛らわしい名前にもかかわらず、イベントのオンとオフを切り替えるために使用されません。メソッドはイベントのバインドに使用されon、offメソッドはイベントのバインド解除に使用されます。

イベントのバインドを解除すると、要素から削除されます。イベントを再度使用するには、再度バインドする必要があり、そのために使用するイベント ハンドラーを指定する必要があります。要素は以前のイベント ハンドラーを記憶していないため、イベントを指定するだけでは十分ではありません。

を使用.click(func)すると、 を使用した場合と同じ効果があり.on('click', func)ます。

于 2012-11-20T00:18:01.423 に答える