[英]jQuery .animate(); not running? Not even jumping, nothing's happening
我正在尝试在li
的列表( ul
)上创建动画。 我希望能够单击任何li.answer
并使它们全部向右一个一个地移动,然后淡出。 然后,我希望它们(不可见)返回其原始位置,向后移100px,并在淡入时向右移动,以使其看起来像一组消失了,然后又出现了。 (我有一个功能可以在两个动画之间更改内容,并且该程序是针对移动设备的,因此我不希望使用一组以上的li
)。 我的问题是我的网页上完全看不到动画,但是我也没有收到任何错误,并且console.log()
正常运行。 谢谢,如果这很明显,对不起!
JS / jQuery:
$(".answer").click(function() {
animateOut(this);
console.log("Animation Sent");
});
function animateOut(thiz) {
console.log(thiz,"thiz")
$siblings = $(thiz).siblings();
$parent = $(thiz).parent();
$(thiz).animate({
left: "+=300px",
opacity: "0"
})
}
function returnAnimate(thiz, $siblings, $parent) {
$(thiz).animate({left: "-=400px"})
$(thiz).animate({
left: "+=100px",
opacity: "1"
})
}
CSS:
.answer {
position: relative !important;
color: #333;
font-size: 1.2em;
display: inline-block;
padding: 7px;
margin-bottom: 7px;
background-color: #FE1263;
text-align: center;
position: relative;
border-radius: 10px;
cursor: pointer;
box-shadow: 0px -5px 0px #b2013f inset;
}
的HTML
<li class="activeQuestion">
<p class="well well-sm col-sm-4" id="questionArea">How Do You Like Your Coffee?</p>
<ul class="container-fluid col-sm-12">
<li class="answer"> Black, Like My Soul</li>
<li class="answer"> I Don't Drink Coffee</li>
<li class="answer"> Espresso, Double Shot</li>
<li class="answer"> Skinny Vanilla Latte</li>
</ul>
</li>
这是代码HTML
<li class="activeQuestion">
<p class="well well-sm col-sm-4" id="questionArea">question</p>
<ul class="container-fluid col-sm-12">
<li class="answer"> test</li>
<li class="answer"> test</li>
<li class="answer"> test</li>
<li class="answer"> test</li>
</ul>
</li>
的CSS
.answer {
position: relative !important;
color: #333;
font-size: 1.2em;
display: inline-block;
padding: 7px;
margin-bottom: 7px;
background-color: #FE1263;
text-align: center;
position: relative;
border-radius: 10px;
cursor: pointer;
box-shadow: 0px -5px 0px #b2013f inset;
}
JS
$(".answer").click(function() {
var sib=$(this).siblings().andSelf();
var parent=$(this).parent();
animateOut(sib);
console.log("Animation Sent");
returnAnimate(this,sib,parent);
});
function animateOut(thiz) {
console.log(thiz,"thiz")
$siblings = $(thiz).siblings();
$parent = $(thiz).parent();
$(thiz).animate({
left: "+=300px",
opacity: "0"
})
}
function returnAnimate(thiz, $siblings, $parent) {
$($siblings).animate({left: "-=400px"})
$($siblings).animate({
left: "+=100px",
opacity: "1"
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.