Đặt lại hoạt ảnh jQuery khi dừng hoạt ảnh

Tôi đã có hiệu ứng gợn sóng tuyệt vời từ website sử dụng phần tử SVG/Circle và chức năng hoạt ảnh jQuery để tạo hiệu ứng gợn sóng khi người dùng nhấp. Mặc dù tôi có kiến thức về lập trình cơ bản, tôi biết ít hơn về các hàm/hàm JavaScript và jQuery vì vậy tôi đã đọc rất nhiều từ nghiên cứu của mình về JS và jQuery.Đặt lại hoạt ảnh jQuery khi dừng hoạt ảnh

Tôi đã tìm thấy triển khai hiệu ứng gợn sóng; hữu ích, nhẹ cân và dễ dàng vì vậy tôi muốn khám phá và mở rộng mã để phù hợp với các dự án của tôi.

Được rồi, vậy điều đầu tiên tôi cần biết ở đây là, làm cách nào tôi có thể đặt lại các thay đổi do hoạt ảnh tạo ra khi hoạt ảnh ngừng hoạt ảnh? Tôi biết đây là một câu hỏi đơn giản dành cho bạn nhưng với tư cách là người mới bắt đầu tại JS và jQuery, tôi có thể đạt được điều đó như thế nào?

Đây là bản demo code để xem điều gì đang thực sự xảy ra ở đây.

Tôi đã thử thêm chức năng (như đã thấy trên code):

complete : function(){c.removeAttr('style');}

Nhưng không có gì đã thay đổi và nó vẫn còn lại sau khi các hình ảnh động kết thúc.

Bất kỳ ý tưởng nào tôi đang bỏ lỡ?

Nguồn

2016-07-18 Chain Trap

Thay đổi hoàn toàn callback để:

complete : function() { $(this).remove(); }

Nguồn

2016-07-18 07:46:13

Làm nguội nó hoạt động! Cảm ơn ngài. –

Bạn nên sử dụng phương pháp dừng cho phim hoạt hình stop - https://api.jquery.com/stop/

bạn cũng có thể sử dụng phương pháp clearQueue

Nguồn

2016-07-18 07:46:12

Ông có thể chia sẻ mã để tôi có thể nhìn thấy nơi để đặt các chức năng tại mã của tôi? –

thay vì c.removeAttr ('style'); sử dụng $ (this) .remove(); –

Để loại bỏ "r" từ thuộc tính kiểu của vòng kết nối, hãy thử

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

Tham khảo: http://api.jquery.com/css/ Đặt giá trị của thuộc tính kiểu thành chuỗi trống - ví dụ: $("#mydiv").css("color", "") - xóa thuộc tính đó khỏi phần tử.

hoặc

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

Hãy thử chạy đoạn mã dưới đây:

(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>

Nguồn

2016-07-18 07:51:35 kolunar

Tôi đã thử nó nhưng nó cũng không hoạt động ... –

@ChainTrap Tôi thấy, nó không hoạt động trên JSBin với 'complete: function() {c.css (" r "," ");}', Tôi đã chỉnh sửa câu trả lời của mình, hàm gọi lại phải là 'complete: function() {c.css (" r ", 0);}' – kolunar

theo tài liệu của jquery (http://api.jquery.com/css/) 'ví dụ $ ("#mydiv") .css ("color", "") '- loại bỏ thuộc tính đó khỏi một phần tử' rõ ràng là nó không hoạt động trên JSBin. – kolunar

Đặt lại hoạt ảnh jQuery khi dừng hoạt ảnh

Trả lời

Các vấn đề liên quan