Post link link switch

Question

У меня есть анимационный набор для перехода DIV вниз при нажатии ссылки DOWN. Я хочу, чтобы нисходящая ссылка была заменена на UP-ссылку, когда анимация закончилась, чтобы DIV можно было вернуть. Устанавливается JQuery для анимации DIV в исходное положение. Единственное, с чем я испытываю трудности, - это переключение между DIV и Up.

Вот код 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>​ 

ЯШ:

$(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'); 
    }); 
}); 

и не забудьте сделать LINK1 видимым:

.link1 { 
} 

---

UPDATE

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