如何在两个函数jquery之间缓慢切换

时间:2016-09-21 06:50:10

标签: 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>
&#13;
&#13;
&#13;

这里我附上了html,css和j查询 在这里,我寻找减慢jquery中两个函数之间同时转换的速度。 <div>图像应在页面加载后开始动画,而不会触发任何事件。我还想在切换上插入一个延迟。

1 个答案:

答案 0 :(得分:0)

您可以使用javascript提供的setTimeout(function, milliseconds)“计时事件”来完成此操作。

第一个参数是要执行的函数。

第二个参数表示执行前的毫秒数。

示例:

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