2016-09-21 8 views
0

jqueryの二つの機能の間のトグルを遅くする方法

$(document).ready(function(){ 
 

 

 
function aaa(){ 
 

 

 
$('.poss img').toggle(function() { 
 
    $(this).css({border: '2px solid white'}).animate({ 
 
     borderWidth: 2 
 
    }, 9000); 
 
},function() { 
 
    $(this).animate({ 
 
     borderWidth: 2 
 
    }, 9000); 
 
    aaa(); 
 
     
 
}); 
 

 
} 
 
aaa(); 
 

 
});
.poss{ 
 
    position: absolute; 
 
width: 100%; 
 
height: 100%; 
 
top: 90px; 
 
} 
 

 
.poss img { 
 
position: absolute; 
 
border-radius: 80px; 
 
border: 2px solid white; 
 
box-shadow: 2px 2px 14px rgba(30, 38, 74, 0.86); 
 

 
-moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    -webkit-user-drag: none; 
 
    user-drag: none; 
 
    -webkit-touch-callout: none; 
 
}
<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- comt --> 
 
    <link rel="stylesheet" type="text/css" href='/stylesheets/style.css'> 
 
    <link rel="stylesheet" href="<%= baseUrl %>/stylesheets/bootstrap.css"> 
 
    <script type="text/javascript" src="<%= baseUrl %>/javascripts/jquery-3.1.0.min.js"></script> 
 

 
    <script src="<%= baseUrl %>/javascripts/bootstrap.js"></script> 
 
    <script type="text/javascript" src="<%= baseUrl %>javascripts/appscript.js"></script> 
 

 
    <style> 
 
    .carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 70%; 
 
     margin: auto; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body background="<%= baseUrl %>images/back.jpg"> 
 

 
<div class="poss" style=" float: none; z-index: 1000; position: absolute; width: 20%; margin: 0 auto; left: 0px; right: 0px; " > 
 
         
 
        </div> 
 
         
 
         
 
</body> 
 

 
</html>

私はHTML、CSS、およびjのクエリを取り付けます。
ここでは、jqueryの2つの関数の間のシフトを同時に遅くする方法を探しています。 <div>イメージは、ページロード後にトリガーするイベントなしでアニメーションを開始する必要があります。私はまた、トグルに遅延を挿入したい。

+0

いくつかのいずれか、この –

+0

http://www.java2s.com/Code/JavaScript/jQuery/Toggleamongtwoormorefunctioncallseveryotherclick.htm chekcをこのコードのための答えを見つけてくださいしてくださいこのトグルの遅れ。私はこの2つの機能を次々に実行していきたいと思っています。 –

+0

がどのように挿入することができます。.. –

答えて

0

setTimeout(function, milliseconds)「タイミングイベント」を使用して、javascriptで提供できます。

最初のパラメータは実行される関数です。

第2パラメータは、実行前のミリ秒数を示します。

例:

$('.poss img').toggle(function() { 
    $(this).css({ 
     border: '2px solid white' 
    }).animate({ 
     borderWidth: 2 
    }, 9000); 
}, setTimeout(function() { 
    $(this).animate({ 
     borderWidth: 2 
    }, 9000); 
}, 3000)); 
関連する問題