jQuery에서 애니메이션, 슬라이드, 페이드 등 애니메이션의 지속적인 트리거링 및 지연에 대한 bug_jquery를 공유합니다.
- WBOY원래의
- 2016-05-16 15:20:341982검색
저의 글 작성 스타일은 초반에 문제의 배경과 법적 피해에 대해 이야기하는 것을 좋아합니다.
최근에 작업 옵션을 불러오고 싶어서 기본적으로 숨기고 마우스를 위에 올리면 표시할까 생각했습니다.
처음에는 마우스 오버(또는 마우스 입력) 시 추가를 직접 실행하고 마우스 아웃(또는 마우스 떠나기) 시 제거하는 클래스="활성"을 추가할 계획이었습니다. 이 솔루션은 매우 간단하고 실용적이지만 경험상 그렇지 않을 수도 있습니다. 멋지다(좋아, 이 단어를 사용했는데 순간적으로 너무 낮은 느낌이 들었습니다). 그래서 애니메이션이나 슬라이드와 같은 jQuery 애니메이션을 사용하려고 생각했고, 솔직히 말해서 처음에는 이 플러그인을 작성하면 됩니다. 스스로 문제가 생기기 때문에 구현하기가 쉽지 않습니다. (결국 js 숙달이 좋지 않습니다.) 그러다가 동료의 말을 듣고 jquery를 발견하고 가져온 후 바로 인용했습니다.
(다행히 저는 특정 특수 효과를 하고 싶을 때 플러그인을 온라인으로 찾는 버릇이 없습니다. 이 얘기를 하다 보면 며칠 전 스크롤을 내리다가 접한 일도 생각납니다. 인터페이스의 테이블 헤더입니다. 해결 방법은 수정되었으며 며칠 후에 업로드됩니다. 솔직히 말해서 해당 방법을 인터넷에서 검색했지만 적합한 해결 방법을 찾을 수 없었습니다. 비록 최상의 솔루션은 아닐 수도 있지만 매우 만족스럽습니다.)
본론으로 돌아와서 인터넷에 검색해보니 솔직히 다른 분들의 플러그인도 정말 좋고, 다양한 브라우저에서의 호환성도 해결되었네요. 그런데 개인적으로는 플러그를 2~3개만 사용하고 있습니다. -ins. 페이지를 사용하고, 파일을 가져와야 하고(특별히 문제가 되지는 않는 것 같습니다), 다른 사람이 사용해야 하는데, 결국 성취감이 없습니다.
그래서 드디어 제가 직접 작성했습니다. 시간이 좀 걸리고 문제도 있었지만 다행히 문제는 해결되었습니다. 적어도 jQuery에 내장된 여러 기능은 좀 더 익숙해졌습니다.
ps: 마지막으로 덧붙이자면, 제가 직접 해결책을 찾은 후 바이두를 다시 검색해 보았는데, 처음 나온 웹 링크를 클릭하는 것이 제가 사용한 방법이었습니다.
버그 재발: 원래 애니메이션을 만들고 싶었는데 너무 귀찮은 것 같아서 코드를 작성해 보겠습니다. 이 문제를 아는 사람은 애니메이션을 보지 않고도 문제가 무엇인지 알 수 있습니다. 문제가 있는 경우 먼저 코드를 복사하여 시험해 볼 수 있습니다.
PS: 다음은 애니메이션 애니메이션을 예로 들어 설명합니다.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:70%;margin:50px auto;height:300px;">
<div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">
<div class="test" style="margin-left:-6em">
<a>
测试用的文字
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<script>
$("[data-toggle='tooltip']").tooltip();
$("#test").on("mouseover",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
})
.on("mouseout",function(){
var $this = $(this);
var $thisTest = $this.find("div.test");
$thisTest.css("position","relative");
// $thisTest.stop();
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
})
//连续触发动画bug
//不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画
</script>
</body>
</html>
위 코드에서 stop() 메서드는 제가 보기에 가장 완벽한 솔루션이라고 생각합니다. 주석 처리되지 않은 것은 제가 Baidu에서 검색한 후 다른 사람들이 언급한 것입니다. 하지만 개인적으로 그것이 특별히 완벽하다고는 생각하지 않습니다. 차이점에 대해서는 나중에 언급하겠습니다.
처음에는
$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
$thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});
이 두 줄의 코드에는 filter() 함수가 없습니다. 이는 제가 이 버그를 처음 만났을 때의 코드와 같았습니다.
이 버그의 원인은 짧은 시간 안에 애니메이션이 누적되어 발생하는 것입니다(이전 애니메이션의 재생이 끝나지 않았습니다).(이 문제가 발생하면 이 이유는 나중에 다시 보시면 알 수 있을 것입니다. 암호). 따라서 두 가지 해결책이 있습니다.
【필터】
하나는 필터를 사용하여 애니메이션이 발생하기 전에 애니메이션 중인 요소를 필터링하여 이전 애니메이션이 종료된 요소만 새 이벤트를 트리거할 수 있도록 하는 것입니다.
그러면 새로운 문제가 발생하는데, 이때 해당 콘텐츠 영역 밖으로 마우스를 이동하면 mouseover 이벤트가 발생합니다. 발생했지만 이전 애니메이션이 종료되지 않았기 때문에 이벤트가 발생하더라도 예상한 기능이 실행되지 않습니다. 이때 "마우스리브 이벤트가 발생하고 콘텐츠가 숨겨집니다"라는 예상된 결과를 얻을 수 없습니다.
물론, 마우스 오버 이벤트에 의해 트리거된 애니메이션이 종료되기 전에 운영자가 해당 콘텐츠에 마우스를 계속 올려 놓으면 이 솔루션은 아무런 영향을 미치지 않습니다.
【그만】
stop()은 다들 아시겠지만 다시 한번 옮겨보겠습니다.
//语法结构
$("#div").stop();//停止当前动画，继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
이 솔루션의 아이디어는 간단합니다. 마우스를 올리면 해당 애니메이션이 트리거되지만 애니메이션이 끝나기 전에 마우스리브를 실행하고 동시에 마우스리브에 해당하는 애니메이션을 트리거합니다. , 해당 요소의 진행 중인 애니메이션을 중지해야 합니다. 그러면 버그는 더 이상 존재하지 않습니다.
마지막으로, 이 에세이는 요약이 없는 것 같습니다. 사실은 애니메이션, 슬라이드, 페이드 애니메이션 기능에 익숙해지는 동시에 매개변수가 있는 중지와 없는 중지의 차이점을 알아두는 것입니다. (솔직히 처음에는 매개변수가 없었습니다.) stop을 써볼까 생각도 하다가 하루 이틀 지나서 우연히 API를 보다가 stop을 보고 갑자기 라는 아이디어가 떠올랐습니다. 이 버그를 해결하려면 stop을 사용하세요.)
위는 Script House의 편집자로서 jQuery에서 애니메이션, 슬라이드, 페이드 및 기타 애니메이션의 반복 실행이 계속해서 발생하고 지연되는 버그에 대해 공유하고 있습니다. 앞으로의 작업과 모든 분들께 도움이 되기를 바랍니다. 공부하다.