jQuery - слайд откроется, но не закроется

0

У меня есть код jQuery, который, когда пользователь нажимает на заголовок <h2> открывает div с его содержимым внутри.

Код HTML:

<div class="content1">
    <h2 class="vertical"> open text box</h2>
</div>
<div class="content1-text" >
        Text box
   <div id="back1" style="float:right;">HOME</div>
</div>

Код Css:

.content1-text {
   padding: 20px;
   width: 920px;
   min-height: 560px;
   height: auto;
   background: #61752d;
   margin: 0;
   position: absolute;
   display: none;
}

Код jQuery:

$('.content1').click(function () {
    if($('.content1').is(':visible')){
            $('.content1-text').toggle('slide', {
                direction: 'left'
            }, 1000);
    }
    else{
        $('#back1').toggle('slide', {
            direction: 'left'
        }, 1000, function(){ $('#content1-text').fadeIn();});
    }
});

Проблема в том, что когда пользователь нажимает на открытое текстовое поле, он открывает окно, но когда пользователь нажимает на HOME, он не отскакивает назад, как это было в начале...

Я пытаюсь заставить его скользить слева направо.. и когда он закрывается справа налево.

Я пытался найти его в Интернете, но без всякой удачи.

Мой JsFiddle здесь

  • 2
    Я не думаю, что вы знаете, что вы говорите, чтобы сделать ...
  • 0
    Я знаю, что когда я нажимаю на что-то с именем класса content1, оно открывает что-то (в моем случае мой div) с именем класса content1-text. со скольжением и продолжительностью 1 секунда .. но закрытие, где я получаю свою борьбу
Теги:

3 ответа

2
Лучший ответ

Я думаю, вам действительно нужно просмотреть метод toogle http://api.jquery.com/toggle/

Вы можете сделать следующее:

$('.content1').click(function () {
    $('.content1-text').toggle("slow");
});
$('#back1').click(function () {
    $('.content1-text').toggle("slow");
});

Просмотр демонстрационной версии http://jsfiddle.net/PBm88/11/

РЕДАКТИРОВАТЬ

После более подробной информации о ожидаемом результате вы можете сделать функцию на основе имени classname которая позволяет анимацию слайда для относительного контейнера:

$('.vertical').click(function () {
  var id=$(this).parent().attr('class'),
      slid='.'+id+'-text';
  $(slid).show().animate({
      width:'920px',
      opacity: '1'
  },2000)
});
$('.back').click(function () {
    $(this).parent().animate({
      width:'0px',
      opacity: '0'
    }, 
    {duration:2000,
     complete: function() {
         $( this ).hide();
        }
     });
});

Новая демонстрация http://jsfiddle.net/PBm88/59/

Поделиться
  • 0
    @CTravel Посмотри это jsfiddle.net/PBm88/42
  • 0
    Это способ сохранить content классов и back во все div, которые я использую next и parent по этой причине. Можете ли вы добавить скрипку с несколькими контейнерами?
Показать ещё 1 комментарий
0

У вас нет обработчика кликов для кнопки "домой"

Пытаться

$('.content1').click(function () {
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
});

$('#back1').click(function(){
        $('.content1-text').toggle('slide', {
            direction: 'left'
        }, 1000);
})

Демо: скрипка

Поделиться
  • 0
    Я думаю, что ОП хочет, чтобы контент постепенно исчезал / исчезал
  • 0
    @ Zeaklous хорошо, это больше похоже на это. Но я пытаюсь сделать так, чтобы я мог использовать его еще для 5 материалов. Как .content1 , .content2 т. Д.
0

http://jsfiddle.net/PBm88/13/

Вместо этого используйте этот jQuery:

$(document).ready(function() {
        $('#button, #back1').click(function() {
            $('#box').toggleClass('visible');
        });
    });

CSS:

.visible { display: block; }

Также был изменен HTML с тремя идентификаторами.

Сделайте анимацию в CSS. Измените, как вы сочтете нужным.

Поделиться
  • 0
    Это не делает то, что ожидает от ОП.
  • 0
    Это действительно не то, что мне нужно. Это все еще не закрывается, когда пользователь нажимает на дом. (все права на div)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню