JD_Rocks JD_Rocks - 5 months ago 12
Javascript Question

jQuery .animate(); not running? Not even jumping, nothing's happening

I am trying to create an animation on a list (

ul
) of
li
's. I want to be able to click any
li.answer
and have them all move one by one to the right and then fade out. Then I want them (while invisible) to return to their original places, go back by 100px, and move to the right while fading in, to make it look like one set is disappearing, then another is appearing. (I have a function changing the content between the two animations, and this program is for mobile so I don't want to have more than one set of
li
's). My problem is that I'm seeing absolutely no animation in my webpage, but I'm also getting no errors and my
console.log()
s are running normally. Thank you, and sorry if this is obvious!

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>

Answer

here is the jsFiddle

let me know this is what you were trying?

Comments