logo标签列表

当jQuery动画停止时如何重置动画？

javascriptjquery
6
我从这个网站获得了一个惊人的涟漪效果实现，它使用SVG/Circle元素和jQuery动画函数来创建用户点击时的涟漪效果。虽然我有基本编程知识，但我对JavaScript和jQuery方法/函数的了解不多，因此我在研究JS和jQuery方面阅读了很多资料。
我发现这个涟漪效果实现非常有用、轻量级和易于使用，所以我想探索和扩展代码，使其适用于我的项目。
好的，那么我需要知道的第一件事是，当动画停止动画时，如何重置动画所做的更改？我知道这对你来说是一个简单的问题，但作为JS和jQuery的初学者，我该如何实现？
这里是演示代码，以了解实际发生了什么。
我尝试添加函数（如代码中所示）：
complete : function(){c.removeAttr('style');}

但什么都没有改变，动画结束后它仍然存在。
有任何想法我错过了什么吗？
3个回答
2

将完整回调函数更改为：

complete : function() { $(this).remove(); }
1
为了从圆的样式属性中移除 "r"，请尝试：
complete : function(){c.css( "r", "" );}

参考：http://api.jquery.com/css/ 将样式属性的值设置为空字符串，例如$( "#mydiv" ).css( "color", "" )，会从元素中删除该属性。

或者

complete : function(){c.css( "r", "0" );}

尝试运行以下代码片段：

(function(){
  
    $(".button").on("click", function(e){

        var yOffset = e.pageY - $(this).offset().top;
        var xOffset = e.pageX - $(this).offset().left;
        var self = this;
            
        var xPos = parseInt(xOffset);
        var yPos = parseInt(yOffset);

        $(this).find("svg").remove(); // Remove existing animation changes
        $(this).append('<svg><circle cx="'+xPos+'" cy="'+yPos+'" r="'+0+'"></circle></svg>');
            

        /* Make the animation of SVG - Circle */
        var c = $(self).find("circle");
        c.animate(
            {
                "r" : $(self).outerWidth()
            },
            {
                easing: "easeOutQuad",
                duration: 500,
                step : function(val){},

                /*-------------------------
                 THIS FUNCTION SHOULD WORK
                --------------------------*/
                complete : function(){c.css( "r", "0" );}
            }
        );
    });
}());
.button {
position: relative;
display: inline-block;
height: 40px;
padding: 0 20px;
margin: 0;
background: transparent;
border: none;
color: rgb(0,0,0,0);
font-size: 20px;
font-weight: 900;
text-align: center;
text-transform: uppercase;

-webkit-tap-highlight-color: transparent;
}

.button:hover {
background-color: rgba(158,158,158,0.10);
}

.button:active,
.button:focus {
background-color: rgba(158,158,158, 0.30);
outline: 0;
}


/* SVG - Circle for the ripple effect */
.button svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

.button circle {
fill: rgba(0,0,0,0.50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Reset jQuery animation when it stops animating</title>
</head>
<body>
<button class="button">Button</button>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
</body>
</html>

@ChainTrap 我知道了，在JSBin上使用complete: function(){ c.css("r", "");}是不行的，我已经编辑了我的答案，回调应该是complete: function(){ c.css("r", 0);}。 - Aung Myo Linn
根据 jQuery 的文档（http://api.jquery.com/css/），例如 $( "#mydiv" ).css( "color", "" ) - 可以从元素中移除属性，但在 JSBin 上显然无法工作。 - Aung Myo Linn
@ChainTrap 你试过 complete : function(){c.css( "r", "0" );} 吗？ - Aung Myo Linn
是的，complete: function(){c.css("r","0");} 函数在我的编辑器和 JS Bin 中无法正常工作。 - Chain Trap
你的代码应该有一些语法错误，但是它在 JS Bin 上可以运行，请访问 http://jsbin.com/qamihefuwi/edit?html,css,js,output。 - Aung Myo Linn
0
你能分享一下代码吗？这样我就能看到在我的代码中应该把这个函数放在哪里了。 - Chain Trap
使用$(this).remove()代替c.removeAttr('style')。 - Ujjwal Kumar Gupta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接