Добавление диагонального показа / скрытия с помощью jquery

Question

Добавление диагонального показа / скрытия с помощью jquery

0

Я пытаюсь создать эффект show/hide, используя toggle и animate.

Я создал следующую скрипку:

который использует этот код:

<script>

$(document).ready(function(){

$('.moreinfo').hide();

$('.more').click(function (ev) {
var t = ev.target

$('#info' + $(this).attr('target')).slideToggle(500, function(){
console.log(ev.target)

$('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000},
    "linear");
});

$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')

});

return false;

});

</script>

Проблемы заключаются в следующем:

Я бы хотел, чтобы текст отображался и анимация возникала одновременно. В настоящее время текст показывает, а затем начинается анимация.
Как только анимация произошла, когда я нажимаю "Скрыть информацию (x)", я ожидаю, что текст изменится на "Показать информацию (+)". Он этого не делает. Он постоянно показывает "Скрыть информацию (x)".
Как можно изменить анимацию, чтобы синяя коробка снова сжималась?

Спасибо за все ваше время и помогаем в этом заранее.

Johnny 29 апр. 2014, в 18:51

Источник

0

Я довольно часто использовал Stack Overflow, и на самом деле люди предпочитают такой подход, когда речь идет о вопросах.
Johnny 29 апр. 2014, в 16:52
0

Вы смотрите сейчас, что люди предпочитают.
Pratik 29 апр. 2014, в 16:55
0

для вашего первого вопроса проверьте здесь: stackoverflow.com/questions/1251300/…
vaskort 29 апр. 2014, в 16:58

Показать ещё 1 комментарий

Теги:

jquery

1 ответ

Ещё вопросы

Я довольно часто использовал Stack Overflow, и на самом деле люди предпочитают такой подход, когда речь идет о вопросах.
Вы смотрите сейчас, что люди предпочитают.
для вашего первого вопроса проверьте здесь: stackoverflow.com/questions/1251300/…

Tricky12 · Answer 1 · 2014-04-29T15-33-00.000Z

Я исправил свои 2 и 3 проблемы.

2) Вы изменяете текст в зависимости от того, видна ли "Скрыть информацию (x)". Как только это видно, он никогда не скрывается и поэтому никогда не будет переключаться.

3) Вы увеличиваете размер синего квадрата, но не оживляете его, чтобы вернуть его к исходному размеру.

Демо здесь

Обновление. Для первой проблемы вы можете попробовать добавить fadeOut(), изменить html, fadeIn(), чтобы замедлить скорость до анимации.

Обновленная демоверсия

$('.more').click(function (ev) {
    var t = ev.target;

    $('#info' + $(this).attr('target')).slideToggle(500, function() {

        //$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')
        if($(t).html() == 'Show Info (+)') {
            console.log(ev.target);
            $('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).fadeOut(function() {
                $(this).html('Hide Info (x)').fadeIn(2000);
            });
        } else {
            $('#info2').animate({width: 300, height: 20, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).fadeOut(function() {
                $(this).html('Show Info (+)').fadeIn(2000);
            });
        }

    });

});