Скольжение div при наведении другого div - PullRequest
Новая
       1

Скольжение div при наведении другого div

0 голосов
/ 03 февраля 2020

Я хочу сдвинуть n-й div при наведении другого div. Я сделал функцию, но она не работает. Я хочу сделать слайд при наведении на дочерний div родительского div на соответствующей основе. С этой функцией ничего не скользит при наведении. Пожалуйста, помогите мне. 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
  myfunction();

  });

  function myfunction(index) {
    var x = [];
    $(".check").each(function() {
       x.push($(this).text());
    });
    $("#demo1").text(x[0]); // We can use x[1 or 2 or 0] in the same id to get the value.
    $("#demo2").text(x[1]);
    $("#demo3").text(x[2]);
  }
});
</script>
</head>
<body>
<div id="main">
<p class="check">If you click on the "Hide"</p>
<p class="check">button, I will disappear.</p>
<p class="check">If you click on the "Hide" button</p>
</div>
<p id="demo1">"Hide" button</p>
<p id="demo2">"Hide"</p>
<p id="demo3">button</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

1 Ответ

0 голосов
/ 03 февраля 2020

Вы можете достичь этого, используя slideToggle

var isShow = false;
$("#toggle").click(function(){
     $('.check').slideToggle();
     $(this).text(isShow? "Hide" : "Show");
     isShow = !isShow;
});
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<div id="main">
<p class="check">If you click on the "Hide"</p>
<p class="check">button, I will disappear.</p>
<p class="check">If you click on the "Hide" button</p>
</div>
<p id="demo1">"Hide" button</p>
<p id="demo2">"Hide"</p>
<p id="demo3">button</p>
<button id="toggle">Hide</button>

Если вы все еще хотите использовать 2 кнопки, попробуйте этот способ 

$("#hide").click(function(){
     $(".check").hide(500);
});

$("#show").click(function(){
     $(".check").show(500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<p class="check">If you click on the "Hide"</p>
<p class="check">button, I will disappear.</p>
<p class="check">If you click on the "Hide" button</p>
</div>
<p id="demo1">"Hide" button</p>
<p id="demo2">"Hide"</p>
<p id="demo3">button</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...