JQuery, как показать, скрыть div, как прокрутка с помощью mousedown () и mouseup ()

Question

Можно ли показывать и скрывать div, как стиль прокрутки, с помощью mousedown () от div1 до div5?Я только что разработал функцию прокрутки вниз и вверх.который работает нормально.Можем ли мы изменить эту функцию, чтобы показывать div1, div2 .... когда mousedown() viseversa для mouseup()?

Дело в том, что показывается только один div за один раз

вот мой настоящий код JQuery

$(document).ready(function() {
    var mouseisdown = false;
    $('.up').mousedown(function(event) {
        mouseisdown = true;
      var topVal = $(".content").css("top").replace(/[^-\d\.]/g, ''); //remove the px from the current top val
        topVal = parseInt(topVal);
      console.log(topVal);
      if(topVal < 0){ //This is to stop it when it reaches the top
      $('.up').parents(".container").find(".content").stop().animate({"top":topVal + 20  + 'px'},'slow');
        if (mouseisdown)
    setTimeout(ScrollUp, 400); 
      }
    }).mouseup(function(event) {
        mouseisdown = false;
    });

    $('.dn').mousedown(function() {
        mouseisdown = true;
          var topVal = $(".content").css("top").replace(/[^-\d\.]/g, '');
        topVal = parseInt(topVal);
      console.log($(".content").height()+ " " + topVal);
      if(Math.abs(topVal) < ($(".content").height() - $(".container").height() + 60)){ //This is to limit the bottom of the scrolling - add extra to compensate for issues
      $('.up').parents(".container").find(".content").stop().animate({"top":topVal - 20  + 'px'},'slow');
        if (mouseisdown)
    setTimeout(ScrollDown, 400);
      }
    }).mouseup(function() {
        mouseisdown = false;
    }); 
});

CSS

  div.container {
  overflow:hidden;
  width:250px;
  height:200px;
    zoom: 1;  /* IE7 Fix - doesnt work */
  }
  div.content {
    position:relative;
    top:0;
    left: 110px; /*this is for demo - it cuts off the text */
    zoom: 1; /* IE7 Fix - doesnt work */
    clear:bothl;
  }
  .up, .dn{
      border:1px solid orange;
    cursor: pointer;
  }
  .up:hover, .dn:hover{
      background-color:yellow;
  }

HTML

<div class="container">
    <button class="up">Up</button> &nbsp; 
    <button class="dn">Down</button>
    <hr style="clear:both;"/>

  <div class="content">
     <div id="div1"><p>Dolore magna  aliquam  erat volutpat.</p><p> Suscipit  lobortis  nisl ut aliquip ex ea consequat.</p></div>
     <div id="div1"><p>Suscipit  lobortis  nisl ut aliquip ex</p><p> ea commodo Dolore magna  aliquam  erat volutpat.</p></div>
     <div id="div1"><p>Dolore magna  aliquam  erat volutpat.</p><p>Suscipit  lobortis  nisl ut aliquip ex ea consequat.</p></div>
  </div>
</div>

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

Answer 1

Конечно можно. Сделать это просто с помощью .toggleClass .

  <div onmouseover="javascrpt: $('#container').toggleClass('active')"> bla bla </div>

Пример: http://jsfiddle.net/hqCcx/21/

HTML код:

 <div id="_1"><p>Div1 Dolore magna  aliquam  erat volutpat.</p><p> Suscipit  lobortis  nisl ut aliquip ex ea consequat.</p></div>

 <div id="_2"><p>Div2 Suscipit  lobortis  nisl ut aliquip ex</p><p> ea commodo Dolore magna  aliquam  erat volutpat.</p></div>

 <div id="_3"><p>Div3 Dolore magna  aliquam  erat volutpat.</p><p>Suscipit  lobortis  nisl ut aliquip ex ea consequat.</p></div>

Javascript код:

var scrolldiv = function scrolldiv (par) {

    if (par === "up")
       currentIndex++;
    else
       currentIndex--;

    for (var c  = 0; c < div.length ; c += 1) {
         if (c === currentIndex )
            $("#_"+c).show();
         else
              $("#_"+c).hide();       
    }
}

Answer 2

Здесь: http://jsfiddle.net/8HQKR/1/ или с переключением http://jsfiddle.net/8HQKR/3/. Просто используйте jQuery show и скройте функции при наведении курсора вверх и вниз. Вы также можете использовать .css ('display', 'none') и .css ('display', что угодно). Или настройка дисплея: нет; как правило, в классе CSS, затем addClass и removeClass. Если вы добавляете и удаляете классы, взгляните на .toggleClass.

Answer 3

Используйте .show(), чтобы показать, и .hide(), чтобы скрыть.