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

动画fadeIn问题

1 个答案: