Как исчезнуть элемент при переходе?

Question

Как исчезнуть элемент при переходе?

0

Вот моя проблема:

$(document).ready(function () {
    $("#field-type").change(function () {
        $val = $(this).val();
        if ($val == "checkbox") {
            $("#check-boxes").addClass("shown");
        } else {
            $("#check-boxes").removeClass("shown");
        }
    })
});

Нажмите на поле и установите флажок. Мой хороший переход на показ скрытых опций работает. Но я хотел бы использовать элемент HIDE #check-boxes, так что между Field type и Description будет не так много пробелов. Я попробовал display:none в элементе #check-boxes а затем в Javascript fadeIn и я получаю очень глючные результаты.

Можно ли это сделать?

user1736479 24 сен. 2013, в 18:59

Источник

Теги:

javascript

jquery

html

css

6 ответов

Ещё вопросы

Ivan Nikolaievskyi · Answer 1 · 2013-09-24T15-23-00.000Z

Добавьте эти стили:

#check-boxes {

  transition: all 1.2s ease-in-out;
  transform: translateX(250px) rotateX(135deg);
  opacity: 0;
display: none;
}

#check-boxes.shown {

  transform: translateX(0px) rotateX(0deg);
  opacity: 1;
    display:block  

}

Это не работает, это добавляет моргание к моему сценарию.

Greenhorn · Answer 2 · 2013-09-24T15-16-00.000Z

Если вы хотите использовать slideDown() и slideUp() с непрозрачностью, вы можете сделать это, используя animate()

if ($val == "checkbox") {
 $("#check-boxes").css('opacity', 0).slideDown('slow').animate({ opacity: 1 },{duration: 'slow' });
        } else {
$("#check-boxes").css('opacity', 1).slideUp('slow').animate({ opacity: 0 },{duration: 'slow' });
        }
})

Демо- скрипт

Это хорошо, но вы забыли, что я также использую пользовательские переходы, которые класс "show" дает моему div.

Bucket · Answer 3 · 2013-09-24T14-41-00.000Z

Вы можете легко изменить это, установив свойство margin-bottom ваших .form-group в 0:

.form-group {
    margin-bottom: 0;
}

sushain97 · Answer 4 · 2013-09-24T14-18-00.000Z

В jQuery встроены методы затухания в/из. Например:

//replace $("#check-boxes").addClass("shown"); with
$("#check-boxes").show(400); //fade in 400 ms, essentially the same as jQuery fadeIn()

//$("#check-boxes").removeClass("shown"); with
$("#check-boxes").hide(400); //fade out 400 ms, essentially the same as jQuery fadeOut()

Показать документы
Скрыть документы

Кроме того, для пользовательских анимаций вы можете посмотреть в функции animate jQuery. Взгляните на документы для получения подробной справки.

BYossarian · Answer 5 · 2013-09-24T14-08-00.000Z

Я понимаю, что вы имеете в виду, я получал непоследовательные результаты. Как и следовало ожидать, отображение не является анимированным, что может быть проблемой при объединении переходов с этим. Я пробовал переходить на высоту, но это выглядело странно.

В конце я использовал setTimeout, чтобы отделить изменение свойства отображения и сделать переход:

http://jsfiddle.net/BYossarian/GDj7v/28/

Изменения в HTML:

<div id="check-boxes" class="hidden">

Добавлен CSS:

.hidden {
    display: none;
}

JS:

$(document).ready(function () {

    $("#field-type").change(function () {

        var $val = $(this).val(),
            checkboxes = $("#check-boxes");

        if ($val === "checkbox") {

            checkboxes.removeClass('hidden');
            setTimeout(function () {
                checkboxes.addClass('shown');
            }, 10);

        } else {

            checkboxes.removeClass('shown');
            setTimeout(function () {
                checkboxes.addClass('hidden');
            }, 1210);

        }

    });

});

EDIT/ALTERNATE SOLUTION: Кроме того, перемещение правила свойства transition в правила для #check-boxes.shown означает, что переход происходит только в одном направлении, что устраняет проблему, с которой я #check-boxes.shown с плохой высотой:

http://jsfiddle.net/BYossarian/GDj7v/30/

CSS:

#check-boxes {
    -webkit-transform: translateX(250px) rotateX(135deg);
    transform: translateX(250px) rotateX(135deg);
    opacity: 0;
    height: 0;
}
#check-boxes.shown {
    transition: all 1.2s ease-in-out;
    -webkit-transform: translateX(0px) rotateX(0deg);
    transform: translateX(0px) rotateX(0deg);
    opacity: 1;
    height: auto;
}

lefoy · Answer 6 · 2013-09-24T14-08-00.000Z

Что-то вроде этого?

$(document).ready(function() {
    $('#check-boxes').hide();
    $("#field-type").change(function() {
        $val    = $(this).val();
        if($val == "checkbox") {
            $('#check-boxes').show(0, function(){
                $("#check-boxes").addClass("shown");
            });
        } else {
            $("#check-boxes").removeClass("shown");
        }
    })
});

http://jsfiddle.net/GDj7v/3/