这非常适合将 div 带入窗口,但是,当我尝试放置任何会反转动画的功能时(并使面板以与进入时相同的方式撤退,没有任何反应,哈哈……我是这个 jQuery 的新手东西。我确定我只是做错了什么。
我想要发生的事情是让窗口滑入(就像当前代码一样),然后在它出现 10 秒后,让窗口以与进入时相同的方式退回。
jQuery:
<!-- Live Support Slide-In -->
<script type="text/javascript">
$(document).ready(function() {
// Store our panel into a variable.
var $myPanel = $("#live-chat");
// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());
// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" });
// Set a timeout for the panel to slide and fade in.
setTimeout(function() {
$myPanel.animate({
// The CSS properties we want to animate (opacity and bottom position).
opacity: 1,
bottom: '0'
}, 2000, function() {
// Animation complete.
// Here is where I tried putting an additional setTimeout(). Wouldn't help much, because I can't seem to reverse the animation.
});
}, 5000); // 30 seconds in MS
});
</script>
<!-- End Live Support Slide-In -->
HTML:
<h1 class="tech" style="">Need Help?</h1>
<p style="font-size:14px;">Don't worry! Our sales team is just one-click away. If you have questions regarding a product, your order status, etc. just click the link below and start a Live Chat session now.</p>
<a style="display:block; text-align:right; font-weight:bold; font-size:14px;" href="#">+ Chat with a salesman</a>
<div id="no-thanks-close"><img src="/images/components/no-thanks-close.png" alt="Close this Window..." /></div>
</div>
</div>
任何帮助将不胜感激!:) 提前谢谢你们!