郵政動畫鏈接開關

Question

我有一個動畫設置爲向下滑動DIV鏈接時單擊。當動畫結束時，我希望將下行鏈接替換爲UP鏈接，以便可以返回DIV。將DIV設置回到起始位置的JQuery動畫。我遇到的唯一困難是在Down和Up DIV之間切換。

下面的代碼http://jsfiddle.net/pC6fC/20/

Answer 1

您可以指定要運行的回調，一旦動畫完成，像這樣：

var toggleButton = function() { 
    $(".link, .link1").toggle(); 
}; 

/* Slides down alert banner */ 
$(function(){ 
    $(".link").click(function(){ 
     $(".box1").animate({'margin-top':150}, 500, toggleButton); 
    }); 
}); 

/* Slides up alert banner */ 
$(function(){ 
    $(".link1").click(function(){ 
     $(".box1").animate({'margin-top':0}, 500, toggleButton); 
    }); 
}); 

我也改變visibility: hidden到display: none你的CSS。

查看Fiddle。

Answer 2

也許你可以嘗試使用函數toggle（）來做到這一點。

它用於隱藏或顯示div。

<script type="text/javascript"> 
    function togglefield(classname) { 
     $("." + classname).toggle("slow") 
</script> 



<button onclick="togglefield('test')"> test </button> 

<div class="info"><br/><br/><br/></div> 

這當然可以改善，但這就是我對你的需求的想法。

Answer 3

這裏是提琴：http://jsfiddle.net/ttu9t/

<div class="link">DOWN</div> 
<div class="box1"></div> 
<div class="box2"></div>​ 

JS：

$(function(){ 
    $(document).on('click', '.link', function(){ 
     $('.box1').animate({'margin-top':150}, 500); 
     $(this).text('UP'); 
     $(this).removeClass('link'); 
     $(this).addClass('link1'); 
    }); 
    $(document).on('click', '.link1', function(){ 
     $('.box1').animate({'margin-top':0}, 500); 
     $(this).text('DOWN'); 
     $(this).removeClass('link1'); 
     $(this).addClass('link'); 
    }); 
}); 

，不要忘記將鏈接1可見：

.link1 { 
} 

---

UPDATE

http://jsfiddle.net/ttu9t/2/