コードは初回のみ動作しますか？このプロジェクトの

-1

私は、クリックすると画像を表示するdivがあります。私はトランジションを添付して画像をフェードインさせます。私のjQueryでは、これを行う関数があります。また、トランジションが終了するまで "onclick"イベントが無効になっているという機能を追加しました。これは動作しますが、初めての動作です。ダブルクリックすると、その関数が呼び出される時間が増えると、トランジションの終了を待たずに画像が変化します。なぜ私は困惑しているのですか？どんな助けもありがたい。ここでコードは初回のみ動作しますか？このプロジェクトの

は、関連するコードです：

HTML：

<div id="rightWindow" style="background-image: url('Images/<?php echo $randomPic; ?>');" 


    onclick=" 

    var enable = function() { counter++; 

    if (counter > 7) {counter = 1;} 

    $('#rightWindow').css('background-image', 'url(Images/<?php 

     echo $substring; 

    ?>' + counter + '.jpg)');} 

    enable(); 

    this.onclick = null; 

    $('#rightWindow').on('transitionend', 
     function(e) { 

     alert('ended!'); 

     this.onclick = enable; 

     }); 


    "></div>

出典

2017-09-08 Paul

this.onclickはfunction（）{}のような関数呼び出しでなければなりません。ブール値ではありません。 – bigless

@bigless 'onclick'はどこでもブール値です。 – Xufox

権利。本当に私はそれを探検した場所ではない.. – bigless

多分これが役に立つかもしれません：

私はW3schools

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
 
    transition: width 2s; 
 
} 
 

 
#myDIV:hover { 
 
    width: 400px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="myDIV">hola mundo</div> 
 

 
<script> 
 
$(document).ready(function() { 
 
    $("#myDiv").on('transitionend webkitTransitionEnd', function() { 
 

 
     // your logic, transition is run 
 

 
    }); 
 
}); 
 

 
</script> 
 

 
</body> 
 
</html>

にこの例を得ました

出典

2017-09-08 21:34:07 jjoselon

コードは初回のみ動作しますか？このプロジェクトの

答えて

関連する問題