Вопрос по jQuery

349

12 мая 2017, 16:22

Здравствуйте, такой вопрос. Я только начал изучать jQuery и мне нужна помощь.

Предположим вот сайт, мне нужно что бы при нажатии на иконку она опускалась вниз и обводка становилась чёрная. и так же в обратную сторону, при клике на неё ещё раз она возвращалась на место и снова становилась голубой. Что бы опускалась вниз у меня вроде как получилось, но вот обратно просто без понятия.

Вот кусочек кода:

jQuery('.a').on('click',function ToogleClick(){
    jQuery(".a").css("top", "50px")
    jQuery(".a").css("border", "3px solid #000000");
});

Answer 1

Предложу вам использовать CSS свойство transition и с помощью jQuery добавлять/удалять класс по клику с помощью .toggleClass(). Так же можете добавить еще других CSS стилей для смены в класс .active (я добавил background-color для примера). В зависимости от других стилей, margin-top может не сработать. В этом случае следует попытаться изменять top свойство.

jQuery('.a').on('click', function() { 
  jQuery(this).toggleClass("active"); 
});

.a { 
  margin-top: 0; 
  height: 100px; 
  width: 100px; 
  background-color: black; 
  -webkit-transition: all 1s; 
  transition: all 1s; 
} 
 
.a.active { 
  margin-top: 100px; 
  background-color: yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<div> 
  <div class="a"></div> 
</div>

Answer 2

$(function() { 
  $('.b-item').on('click', function() { 
    $('.b-item-current').not(this).removeClass('b-item-current'); 
    $(this).toggleClass('b-item-current'); 
  }); 
});

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.b { 
  text-align: center; 
} 
 
.b-item { 
  margin: 10px auto; 
  display: inline-block; 
  vertical-align: top; 
  width: 100px; 
  height: 100px; 
  line-height: 100px; 
  color: #fff; 
  background: #999; 
  border: 3px solid #5B8FDA; 
  border-radius: 50%; 
  transform: translateY(0); 
  transition: transform .5s; 
} 
 
.b-item:before { 
  content: 'No active'; 
} 
 
.b-item-current { 
  transform: translateY(50px); 
  border-color: tomato; 
} 
 
.b-item-current:before { 
  content: 'Active'; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="b"> 
  <div class="b-item"></div> 
  <div class="b-item"></div> 
  <div class="b-item"></div> 
  <div class="b-item"></div> 
  <div class="b-item"></div> 
</div>