Сворачивание блока через яваскрипт

Тема в разделе "Другие языки", создана пользователем acelotuse, 7 апр 2011.

Модераторы: Цукер
  1. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    Есть код:
    Код:
    $(document).ready(function(){
            $(".trigger").click(function(){
                    $(".panel").toggle("fast");
                    $(this).toggleClass("active");
                    return false;
            });
    		        $(".triggerh").click(function(){
                    $(".panelh").toggle("fast");
                    $(this).toggleClass("active");
                    return false;
            });
    });
    Знающие люди поймут. Но все равно опишу.
    Есть две кнопки trigger и triggerh. При нажатии на каждую из них открываются блоки panel и panelh соответственно.
    Проблема в том, что если открыт один, то при нажатии на второй, второй тоже открывается, а надо сделать так, чтобы при открытии одного, второй автоматически закрывался.
    Может кто посоветовать??

    И еще. Как сделать так, чтобы появляющийся блок появлялся с эффектом easeOutBack ???
     
  2. Alternator

    Alternator

    Регистр.:
    23 мар 2009
    Сообщения:
    295
    Симпатии:
    145
    Код:
    $(document).ready(function(){
            $(".trigger").click(function(){
                    $(".panel").toggle("fast");
                    $(".panelh").hide("fast");
                    $(this).toggleClass("active");
                    return false;
            });
    		        $(".triggerh").click(function(){
                    $(".panelh").toggle("fast");
                    $(".panel").hide("fast");
                    $(this).toggleClass("active");
                    return false;
            });
    });
    
     
    acelotuse нравится это.
  3. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    Спасибо дружище. Прекрасно работает!!!

    А насчет easeOutBack никто не сможет подсказать???
     
  4. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    И еще один вопрос.
    Ка сделать, чтобы при отведенной мышке через 7 секунд блок сворачивался автоматом?
     
  5. murlo

    murlo Создатель

    Регистр.:
    8 июн 2006
    Сообщения:
    34
    Симпатии:
    33
    При отведёной мышке с какого блока,блоков?
    ЗЫ. setTimeout прекрасно уживаются с jQuery. Можно использовать плагин jquery.timers, но сейчас попробовал, что то он у меня не пошёл, разбираться не стал.
     
  6. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    С активного. Код прописан так, чтобы был активный только один блок, второй сворачивается автоматом, если открывается другой.
    Про setTimeout ничего не знаю, так как чайник.
     
  7. Dr.Sheff

    Dr.Sheff

    Регистр.:
    20 ноя 2010
    Сообщения:
    175
    Симпатии:
    26
    В блок, с которого убирается мышь, прописывается собитие onMouseOut.
    По этому событию заводится таймер, по истечению которого и выполняется сворачивание. Это в общем виде, что Вам нужно сделать. jQuery тут не нужен. Почитайте про таймеры в Javascript.
     
  8. murlo

    murlo Создатель

    Регистр.:
    8 июн 2006
    Сообщения:
    34
    Симпатии:
    33
    Если использовать то что у вас уже есть и не особо мудрствовать..
    HTML:
    <script type="text/javascript">
    $(document).ready(function(){
      $("#b1").click(function(){
        $("#d1").toggle("fast");
        $("#d2").hide("fast");
      });
      $("#b2").click(function(){
        $("#d2").toggle("fast");
        $("#d1").hide("fast");
      });
      $('#ttttt').mouseout(function(){
        setTimeout(function(){$("#d1, #d2").hide("fast")}, 2000)
      });
      $("#d1, #d2").hide("fast");
    });
    <input name="name1" type="button" id="b1" value="value1" /><input name="name2" type="button" id="b2" value="value2" />
    <div id="ttttt">
      <div id="d1">dfsbsd<br />dsbsdd<br />dsbdbsdf<br />bdsbfsdb<br />dsfbdfbb </div>
      <div id="d2">dsbdfbsdf<br />fbfsdbfsdb<br />dsfbsdfbsdf<br />dfsbdsfbsdfb<br />dfbsdfbdb<br />dsfbdfbsdf</div>
    </div>
     
    acelotuse нравится это.
  9. acelotuse

    acelotuse

    Регистр.:
    31 мар 2009
    Сообщения:
    312
    Симпатии:
    37
    спасибо большое за старания. Только у меня ничего не вышло. Изменил свой код, вроде бы все сделал правильно (вставил свои id), но ничего не вышло. Кнопки стоят, а блоки не появляются. "Омертвело" все.
     
  10. murlo

    murlo Создатель

    Регистр.:
    8 июн 2006
    Сообщения:
    34
    Симпатии:
    33
    Стукайся в аську со свом кодом, что бы тут чат не устраивать..