0

Необходимо сделать плавное изменение ширины блока при наведении на него. При наведении мышкой на блок он должен увеличиться до нужного размера. В случае, если убрать курсор мыши раньше, чем блок увеличится до нужного размера, то в этом случае блок не должен останавливаться, а должен закончить изменение своего размера.

Пока курсор мыши наведен на блок, блок должен оставаться в измененном/увеличенном состоянии.

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

<div class="div1">Block1</div>

div { 
    background-color:#ccc; 
    width:200px;
    height:100px;
    border:2px solid #000;
 }

$(document).ready(function(){
    $(".div1").on({
        mouseenter: function() {
            $(this).animate({ 
                width: 500
                }, 
                {duration:300, queue: false} 
            )
        },
        mouseleave: function() {
            $(this).animate({
                width: "200px"
                }, 
                {duration:300, queue: false} 
            )
        }
    })
});

2 ответа 2

3

$(function() {
	$('#block').hover(
    function(){
		$(this).animate({width:200,height:200});
	},
    function(){    		
           $(this).animate({width:100,height:100});
	});
});
#block {
  width:100px;
  height: 100px;
  border: 1px solid red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="block"></div>

и с задержкой в пару секунд:

$(function() {
  $('#block').hover(
    function() {
      $(this).animate({
        width: 200,
        height: 200
      });
    },

    function() {
      var k= $(this);
      setTimeout(function() {
        k.animate({
          width: 100,
          height: 100
        });

      }, 2000);
    });
});
#block {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>

0
0

Используйте jquery.animate() для анимации и setTimeout() для паузы. Но советую вам сначала привести пример вашего кода, за вас его никто писать не будет!

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.