jquery - 动画淡入问题

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