.animate()如果页面不是新打开的或未刷新的，则不会触发 [英] .animate() not triggering if page is not newly opened or is not refreshed
本文介绍了.animate()如果页面不是新打开的或未刷新的，则不会触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我第一次单击问题时，您可以看到用于显示答案的动画.但是当我关闭它并再次打开它时，它将默认设置为向下滑动，并且动画不再起作用.
When I click the questions for the first time, you can see the animation for showing the answers. But when I closed it and open it again, it will just default to slidedown and my animation is not working anymore.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One Month jQuery</title>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Frequently Asked Questions</h1>
<div class="panel">
<div id="q1" class="question">1. What is jQuery?
<img id="arrow1-down" class="arrow down" src="assets/arrow-down.svg">
<img id="arrow1-up" class="arrow up collapse" src="assets/arrow-up.svg">
</div>
<div id="a1" class="answer collapse">
jQuery is a JavaScript framework, which purpose is to make it much easier to use JavaScript on your website. You could also describe jQuery as an abstraction layer, since it takes a lot of the functionality that you would have to write many lines of JavaScript to accomplish and wraps it into functions that you can call with a single line of code.
</div>
</div>
<br>
<div class="panel">
<div id="q2" class="question">2. Do I need to know JavaScript to use jQuery?
<img id="arrow2-down" class="arrow down" src="assets/arrow-down.svg">
<img id="arrow2-up" class="arrow up collapse" src="assets/arrow-up.svg">
</div>
<div id="a2" class="answer collapse">
No, you don't need to know JavaScript to use jQuery. In fact, jQuery tries to simplify a lot of the complicated things with JavaScript, like AJAX calls and DOM manipulation, so that you may do these things without knowing JavaScript.
</div>
</div>
<br>
<div class="panel">
<div id="q3" class="question">3. Does jQuery replace JavsScript?
<img id="arrow3-down" class="arrow down" src="assets/arrow-down.svg">
<img id="arrow3-up" class="arrow up collapse" src="assets/arrow-up.svg">
</div>
<div id="a3" class="answer collapse">
jQuery does NOT replace JavaScript, and while it does offer some syntactical shortcuts, the code you write when you use jQuery is still JavaScript code.
</div>
<br>
<div class="panel">
<div id="q4" class="question">4. Can I start learning jQuery without ever learning HTML & CSS?
<img id="arrow3-down" class="arrow down" src="assets/arrow-down.svg">
<img id="arrow3-up" class="arrow up collapse" src="assets/arrow-up.svg">
</div>
<div id="a4" class="answer collapse">
<img src="assets/no.gif" alt="No">
</div>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
CSS
body {
color: #3b3b3b;
margin: 50px 150px;
font-family: 'Helvetica', 'Arial', sans-serif;
}
h1 {
font-size: 30px;
font-weight: 200;
margin-bottom: 30px;
}
.panel {
cursor: pointer;
font-size: 17px;
font-weight: 200;
border: 1px solid #f7f7f6;
}
.question {
padding: 15px;
background-color: #f7f7f6;
}
.question:hover {
color: #149ed8;
}
.arrow {
width: 17px;
height: 11px;
float: right;
margin-top: 5px;
}
.answer {
padding: 30px 10px;
opacity: 0.08;
font-style: italic;
color: #999;
font-size: 12px;
line-height: 4;
background: #CAE1FF;
}
.collapse {
display: none;
}
JS
$(document).ready(function() {
$(".question").click(function() {
$(this).next().slideToggle("slow").animate({
"opacity": "1",
"line-height": "20",
"padding": "10px"
});
$(this).children().toggleClass("collapse");
});
});
推荐答案
添加标记以了解答案何时打开或关闭:
Add a flag to know when the answer is open or closed:
$(document).ready(function () {
$(".question").click(function () {
$(this).next().slideToggle("slow").animate({
"opacity": "1",
"line-height": "20",
"padding": "10px"
});
//$(this).children().toggleClass("collapse");
var open = ($(this).next().css("display") == "block");
if(open){
$(this).next().css({
"opacity": "0.08",
"line-height": "4",
"padding": "30px 10px"
});
}
});
});
工作示例: http://jsfiddle.net/Twisty/72kqvzy9/
这篇关于.animate()如果页面不是新打开的或未刷新的，则不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
