1

問題は、アニメーションの最後にある「#mas」div を 2 回クリックすると、「arriba」関数が自動的に実行されることです。

JS

$(document).ready(function() {
  $('#mas').bind('click', abajo);
   function abajo(e) {
    e.preventDefault();
    $('#mas').unbind();
    $('#contenido').animate({
      top: '-=470px'
    }, 11000, function() {
        $('#mas').hide();
    $('#menos').show();
    $('#mas').bind('click', abajo);
    });
  }
  $('#menos').bind('click', arriba);
  function arriba(e) {
   e.preventDefault();
   $('#menos').unbind();
   $('#contenido').animate({
     top: '+=470px'
   }, 11000, function() {
        $('#mas').show();
        $('#menos').hide();
    $('#mas').bind('click', arriba);
    });
 }

});

HTML 

<div id="contenedor">
    <img src="asd.jpg" id="contenido"/>
    <div id="mas">mas</div>
    <div id="menos">menos</div>
</div>

おそらく私のロジックに何か問題があるか、バインド/アンバインド関数の間違った使用があります。事前に感謝します。

4

1 に答える 1

0

イベント ハンドラをバインドおよびアンバインドする代わりに、アニメーションを確認していただけますか?

$('#mas').bind('click', abajo);
   function abajo(e) {
    e.preventDefault();

    // Check if there is animation, if yes, return.
    if($('#contenido').is(":animated")) return;

    $('#contenido').animate({
      top: '-=470px'
    }, 11000, function() {
       $('#mas').hide();
       $('#menos').show();
    });
  }
于 2012-07-18T22:08:12.457 に答える