Статьи

5 Полезный Базовый Синтаксис JQuery

Январь 12, 2019

1) Скрыть / Показать

Это используется, чтобы скрыть или показать элементы HTML без каких-либо эффектов. Используйте это, если вы хотите быстро скрыть или показать некоторые элементы HTML.

  • Синтаксис: скрыть (), показать ()

ПРИМЕР : 

$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").hide();
	});
	$(".btn2").click(function(){
		$("p").show();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide

2) Fade in / Fade out

Это включает в себя сокрытие и показ html-элементов с использованием хороших эффектов затухания. Он хорошо используется, когда вы хотите, чтобы показать или скрыть div и его содержание хорошим способом.

  • Синтаксис: fadeIn (), fadeout ()

ПРИМЕР: 

 $(document).ready(function(){
	$(".btn1").click(function(){
		$("p").fadeOut()
	});
	$(".btn2").click(function(){
		$("p").fadeIn();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

3) Стоп

Если вы хотите остановить запущенные анимации, просто используйте это.

  • Синтаксис: стоп ()

ПРИМЕР: 

 $(document).ready(function(){
	$("#start").click(function(){
		$("div").animate({height:300},3000);
	});
	$("#stop").click(function(){
		$("div").stop();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop

4) Анимировать

Хороший синтаксис, который вносит изменения в элемент из одного состояния в другое с помощью стилей CSS. Он просто постепенно изменяет значение свойства CSS, что приводит к эффектам анимации.

  • Синтаксис: animate ()

ПРИМЕР: 

 $(document).ready(function()
{
	$("#btn1").click(function(){
		$("#box").animate({height:"300px"});
	});
	$("#btn2").click(function(){
		$("#box").animate({height:"100px"});
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

5) Слайд Toggle

Этот синтаксис широко используется на различных веб-сайтах, использующих jQuery. В идеале это просто скрывать и показывать html-элемент, но с очень хорошим эффектом скольжения, как в левом меню панели администратора в типичной области WordPress.

  • Синтаксис: slideToggle ()

ПРИМЕР: 

 $(document).ready(function(){
	$("button").click(function(){
		$("p").slideToggle();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

35
Share: