0

私はjQueryにかなり慣れていませんが、それは簡単なことのように思えました。まったく同じで、わかりません。2 つのアニメーション関数を切り替えようとしていますが、関数 2 が完了すると先に進み、関数 1 も呼び出します。

function toggleThis(){
    $("#navSliderArrow").toggle(function() {       
        $(this).animate({ marginLeft: '235' }, 500);
        $("#sliderArrow").attr("src", "images/hide_nav.gif");
    }, function() {       
        $(this).animate({ marginLeft: '0' }, 500);
        $("#sliderArrow").attr("src", "images/show_nav.gif");
    });
}

私は何を間違っていますか？~ギズ

4

3 に答える 3

1

以前の私のコメントから、

私の知る限り、.toggle にはコールバック関数が 1 つしかありません。そのような2つの機能があるとどうなるかわからない..とにかく、ここで何を達成しようとしていますか?

続きを読む.toggle API ドキュメント

onclickの表示と非表示を試みていると思います#sliderArrow。その場合は、以下を試してください。

   $(function () {
       var $slideArrow = $("#sliderArrow");
       var $navSlideArrow = $('#navSliderArrow');
       $slideArrow.on ('click', function () {              
          if ($slideArrow.attr('src').indexOf('show') >= 0) {
                $navSlideArrow.animate({ marginLeft: '235' }, 500);
                $slideArrow.attr("src", "images/hide_nav.gif");
          } else {
                $navSlideArrow.animate({ marginLeft: '0' }, 500);
                $slideArrow.attr("src", "images/show_nav.gif");
          }
       });
   });
于 2012-04-06T21:15:10.407 に答える
0

.toggle() のイベント ハンドラー バージョンもあります - http://api.jquery.com/toggle-event/

トグル イベント ハンドラーはクリック メソッド自体をバインドするため、アニメーションを直接実行するだけで済みます。

$("#navSliderArrow").toggle(
    function() {       
        $(this).animate({ marginLeft: '235' }, 500);
        $("#sliderArrow").attr("src", "images/hide_nav.gif");
    }, 
    function() {       
        $(this).animate({ marginLeft: '0' }, 500);
        $("#sliderArrow").attr("src", "images/show_nav.gif");
    }
);
于 2012-04-06T22:08:43.433 に答える
0

引用OP:

「私は何を間違っていますか？」

jQuery documentationに従って、構文が間違っています。内に 2 つのコールバック関数を含めることはできませんtoggle()。

.toggle( [デュレーション] [, イージング] [, コールバック] )

  • duration - アニメーションの実行時間を決定する文字列または数値。
  • easing - トランジションに使用するイージング関数を示す文字列。
  • callback - アニメーションが完了したら呼び出す関数。

編集：

他の回答を読んだ後、jQueryの別のバージョンがtoggle()あることがわかりました...

http://api.jquery.com/toggle-event/

.toggle( ハンドラ(イベントオブジェクト), ハンドラ(イベントオブジェクト) [,ハンドラ(イベントオブジェクト)] )

  • handler(eventObject) - 要素がクリックされるたびに実行する関数。
  • handler(eventObject) - 要素が奇数回クリックされるたびに実行する関数。
  • handler(eventObject) - クリック後に循環する追加のハンドラー。

適切に実装すると、jQuery は次のようになります...

$(document).ready(function() {
    $("#navSliderArrow").toggle(
        function() {       
            $(this).animate({ marginLeft: '235' }, 500);
            $("#sliderArrow").attr("src", "images/hide_nav.gif");
        },
        function() {       
            $(this).animate({ marginLeft: '0' }, 500);
            $("#sliderArrow").attr("src", "images/show_nav.gif");
        }
    );
});

そして jQuery を使用すると、 のようなインライン JavaScript はまったく必要ありません<a href="#" onclick="togglethis()">。HTML は次のようになります。

<a href="#" id="navSliderArrow">

HTMLがOPに含まれておらず、ターゲット要素がどうあるべきかわかりません。

jsFiddle デモ

于 2012-04-06T21:08:47.443 に答える