анимировать с помощью кнопки триггера - PullRequest
Новая
       3

анимировать с помощью кнопки триггера

3 голосов
/ 21 ноября 2011

У меня есть div, который увеличивает его высоту при нажатии.Код jQuery выглядит следующим образом: 

$('.contact-click').click(function() {
    $('#rollout').animate({
        height: "375", 
    }, 500);
});

$('a.close').click(function() {
    $('#rollout').animate({
        height: "0", 
    }, 500);
});

Я хотел бы иметь кнопку запуска, а не кнопку a для открытия и закрытия div.Но я не понимаю, как это сделать.Для функции slide() есть опция триггера, но не для анимации.Зачем?Спасибо за вашу помощь

Ответы [ 3 ]

0 голосов
/ 21 ноября 2011 
<input type="Button" onClick="$('.contact-click').trigger('click');" value="Animate"/>
    /*
    Will call 
    $('.contact-click').click(function() {
        $('#rollout').animate({
            height: "375", 
        }, 500);
    });
    */
<input type="Button" onClick=" $('a.close').trigger('click');" value="Close"/>

    /*
    will call
    $('a.close').click(function() {
        $('#rollout').animate({
            height: "0", 
        }, 500);
    });
    */
0 голосов
/ 21 ноября 2011

Или вы используете только одну кнопку и используете переключатель. Пример: 

<input type="button" id="triggerMe" value="Open/Close" />

И используйте переключатель так: 

$('#triggerMe').toggle(function(){
    $('#rollout').animate({
        height: "375", 
    }, 500);
  },function(){
    $('#rollout').animate({
        height: "0", 
    }, 500);
  }
);

http://api.jquery.com/toggle/

Более n Out! Редактировать пример здесь http://jsfiddle.net/Xq63U/

0 голосов
/ 21 ноября 2011

Если я понял ваш вопрос, чтобы щелкнуть HTML button, запустите указанный выше код, вам просто нужно удалить a из селектора close: 

$('.close').click(function() {

Затем вам нужно поместить две кнопки в ваш HTML с соответствующими классами, как определено в вашем jQuery: 

<input type="button" class="close" value="Close" />
<input type="button" class="contact-click" value="Contact" />
...