要素を点滅させ、他の要素がクリックされたときに要素を停止させます。

要素の点滅を開始するために関数myBlinkを使用します。私は要素が点滅する回数を決定するパラメータnを使用します。しかし、私はこのパラメータを取り除き、他の要素、たとえばd1やd2、さらには本文をクリックするとすぐに要素を点滅させたいと考えています。それは可能ですか？ここに私のコードは次のとおりです。要素を点滅させ、他の要素がクリックされたときに要素を停止させます。

$(document).ready(function() { 
 
    init(); 
 
}); 
 

 
function init() { 
 
    myBlink("#a1",6); 
 
} 
 

 
function myBlink(th,n) { 
 
    var currColor=$(th).css("color"); 
 
    for (var i=0;i<n;i++) { 
 
      $(th).fadeOut(200).fadeIn(200).css({"color":"Red","border": "3px" ,"border-style":"dotted" }) 
 
         }; 
 
    $(th).css({"color":"currColor"}) 
 
         }

body { 
 
    margin: 20px; 
 
    font-family: "Georgia", serif; 
 
    line-height: 1.8em; 
 
    color: #333; 
 
} 
 

 
.wideBox { 
 
    position :relative; 
 
    width : 800px; 
 
    height : 600px; 
 
    background: lightgrey; 
 
    font-family: "Georgia", serif; 
 
    border: 2px solid grey; 
 
} 
 

 
.square { 
 
    font: 30px Verdana, sans-serif; 
 
    border : 2px solid grey ; 
 
    background-color: yellow; 
 
    
 
} 
 

 
#a1 { position :absolute; 
 
     width: 50px; 
 
     height: 50px; 
 
     top :100px; 
 
     left : 100px; 
 
     font: 30px Verdana, sans-serif; 
 
     border : 2px solid grey ; 
 
     background-color: white; 
 
} 
 

 
#d1 { 
 
    position :absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    top :200px; 
 
    left : 100px; 
 
} 
 

 
#d2 { 
 
    position :absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    top : 200px; 
 
    left : 250px; 
 
}

<body> 
 
    <div id="general" class="wideBox"> 
 
    <div id="d1" class="square">1</div> 
 
    <div id="d2" class="square">2</div> 
 
    <div id="a1">?</div> 
 
    </div> 
 
    
 

 
</body>

出典

2016-10-15 E.Stavr

おかげLJNielsenDk次
チェックは、私はそれを試してしまう。 –

私はdivを点滅するとjQuery addClass()とremoveClass機能を使用することによって、我々はクラスを追加したり削除することができます点滅クラスが追加されました。 snippet-

$(document).ready(function() { 
 
    init(); 
 
    $('.square').on('click', function(){ 
 
    var id = this.id; //you can get which div clicked 
 
    myStopBlink("#a1"); //call stop blink function 
 
    }); 
 
}); 
 

 
function init() { 
 
    myBlink("#a1"); 
 
} 
 

 
//start blink 
 
function myBlink(th) { 
 
    $(th).addClass('blink'); 
 
} 
 

 
//stop blink 
 
function myStopBlink(th) 
 
{ 
 
    $(th).removeClass('blink'); 
 
}

body { 
 
    margin: 20px; 
 
    font-family: "Georgia", serif; 
 
    line-height: 1.8em; 
 
    color: #333; 
 
} 
 
/*blink css starts here*/ 
 
.blink { 
 
    animation: blink-animation 1s steps(5, start) infinite; 
 
    -webkit-animation: blink-animation 1s steps(5, start) infinite; 
 
    color:Red; 
 
    border: 3px !important; 
 
    border-color:red !important; 
 
    border-style:dotted !important; 
 
} 
 
@keyframes blink-animation { 
 
    to { 
 
    visibility: hidden; 
 
    } 
 
} 
 
@-webkit-keyframes blink-animation { 
 
    to { 
 
    visibility: hidden; 
 
    } 
 
} 
 
/*blink css ends here*/ 
 

 
.wideBox { 
 
    position :relative; 
 
    width : 800px; 
 
    height : 600px; 
 
    background: lightgrey; 
 
    font-family: "Georgia", serif; 
 
    border: 2px solid grey; 
 
} 
 

 
.square { 
 
    font: 30px Verdana, sans-serif; 
 
    border : 2px solid grey ; 
 
    background-color: yellow; 
 
    
 
} 
 

 
#a1 { position :absolute; 
 
     width: 50px; 
 
     height: 50px; 
 
     top :100px; 
 
     left : 100px; 
 
     font: 30px Verdana, sans-serif; 
 
     border : 2px solid grey ; 
 
     background-color: white; 
 
} 
 

 
#d1 { 
 
    position :absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    top :200px; 
 
    left : 100px; 
 
} 
 

 
#d2 { 
 
    position :absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    top : 200px; 
 
    left : 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="general" class="wideBox"> 
 
    <div id="d1" class="square">1</div> 
 
    <div id="d2" class="square">2</div> 
 
    <div id="a1">?</div> 
 
    </div> 
 
</body>

出典

2016-10-15 11:32:12 abpatil

要素を点滅させ、他の要素がクリックされたときに要素を停止させます。

答えて

関連する問題