我正在嘗試使用jQuery爲內容製作動畫。但不能正常工作。jQuery動畫不能正常工作
這裏有一個例子的jsfiddle:https://jsfiddle.net/oLt5uwz3/
我不希望使用任何height
或jQuery的slideUp()/slideDown()
。
我想在mouseleave時按每個內容高度自動移動內容。在這個例子中,當我點擊?
和mouseleave快然後動畫不能正常工作。
$('.open').click(function(){
$('.lists').slideToggle(); });
$('.next').click(function(){
$('.tip2').fadeIn();
$('.tip1').hide(); });
$('.prev').click(function(){
$('.tip2').hide();
$('.tip1').fadeIn(); });
$(function(){
$('.div').css('bottom','-'+$(".div").outerHeight()+'px'); });
$('.hover, .height').on('mouseenter',function(){
$('.div').stop().animate({bottom:'0px'},'slow'); });
$('.hover, .height').on('mouseleave',function(){
$('.div').stop().animate({bottom:'-'+$(".height").outerHeight()+'px'},'slow');});
.div {background:black;width:350px;position:fixed;bottom:0;right:0}
.hover {padding:2px;text-align:center;border-bottom:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:15%;display:inline-block;position:absolute;margin-top:-19px}
.tip1 {background:black;color:white;padding:5px}
.tip2 {display:none;background:black;color:white;padding:5px}
.prev, .next {text-align:center;border:1px solid #ccc;font-size:20px;color:white;cursor:pointer;background:black;width:35%;display:inline-block}
.open {padding:2px;text-align:center;border:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:22.8%;display:inline-block}
.lists {display:none;background:black;color:white;padding:5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div">
<div class="hover">Hover</div>
<div class="height">
<div class="tip1">MacBook now comes with 1GB of memory standard and larger hard drives for the entire line perfect for running more of your favorite applications and storing growing media collections.</div>
<div class="tip2">iPhone is a revolutionary new mobile phone that allows you to make a call by simply tapping a name or number in your address book, a favorites list, or a call log. It also automatically syncs all your contacts from a PC, Mac, or Internet service. And it lets you select and listen to voicemail messages in whatever order you want just like email.</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="open">?</div>
<div class="lists">
<ol>
<li>Product 1/Price : $10</li>
<li>Product 2/Price : $20</li>
<li>Product 3/Price : $30</li>
<li>Product 4/Price : $40</li>
<li>Product 5/Price : $50</li>
</ol>
</div>
</div>
</div>
歡迎堆棧溢出!尋求調試幫助的問題(「爲什麼不是這個代碼工作?」)必須包含在問題本身**中重現**所需的最短代碼。儘管您已經提供了一個示例鏈接,但如果鏈接無效,那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –
你真的沒有讓我們很容易幫助你。此代碼格式不正確,其代碼太多,並且沒有很好的描述/評論。 –
您可以編輯示例.. @ Elegant.Scripting – Dezz