动画fadeIn问题

Question

我正在尝试运行一个fadeIn()和animate()函数，使contact-arrow-fade-container 淡出和从右侧激活，然后在其父div contact-arrow-content-wrap位于13%的位置就位。

出于某种原因，我甚至没有把这个展示出来。我在display: none设置了它，但是fadeIn不应该让它显示出来吗？

有人看到我做错什么了吗？

​

function fade(){
	$('#contact-arrow-fade-container').fadeIn(500);
	$('#contact-arrow-fade-container').animate({'left': '0%'}, 700);
};

#contact-arrow-content-wrap {
	margin: 30% 13% 5% 13%;
}
#contact-arrow-fade-container {
	display: none;
	position: relative;
	left: 80%;
}
#contact-box-title1 {
	color: #FFF;
	font-size: 2em;
}
#contact-box-title2 {
	color: #FFF;
	font-size: 4.8em;
	padding-top: 25px;
}
#contact-box-description {
	color: #404040;
	font-size: 1.4em;
	line-height: 1.5em;
	padding-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-arrow-content-wrap">
  <div id="contact-arrow-fade-container">
    <div id="contact-box-title1">REACH OUT AND</div>
    <div id="contact-box-title2">SAY HELLO</div>
    <div id="contact-box-description">Have questions, comments, or just want to say hello?
	Feel free to start the dialogue; we look forward to stimulating conversations. For project
	inquiries kindly visit <span id="contact-link"><a href="discuss-project">Discuss a Project</a></span>.</div>
	<div id="contact-box-call-container">
		<div id="contact-box-call-title">Need to speak with someone? Call us!</div>
		<div id="contact-box-call-title">(555) 555-5555</div>
	</div>
	</div>

​

Answer 1

将其添加到.#contact-arrow-fade-container规则中：

opacity: 0;

将jQuery代码更改为：

(function() {
    $('#contact-arrow-fade-container').animate({
        'opacity' : 1, 'left': 0
    }, 700);
})();

JS Fiddle