Спонсор поста: Поможем осуществить срочный выкуп квартир.

Оригинал.

Пример.

На самом деле это очень просто. Для начала сделаем короткий html.

<img src="img/logo.gif" alt="Logo" id="image">
 <p>
  Click To Zoom In
 </p>

Тут мы имеем картинку и параграф. Мы могли использовать и другой тэг вместо параграфа. Я хотел показать, как мы можем задать событие по клику для любого элемента.

$(document).ready(function()
    {
    $("#image").css("width", "100px");
        $("#image").toggle(function()
            {
                $(this).animate({width: "300px"}, 1000);
                $('p').text("Click To Zoom Out");
                
            }, function(){
                $(this).animate({width: "100px"}, 1000);
                $('p').text("Click To Zoom In");
            });
    });

Шаг за шагом:

$(document).ready(function()
    {
    $("#image").css("width", "100px");

$(document).ready(function()
{
$(“#image”).css(“width”, “100px”);

Когда документ готов, мы задаем ширину элемента с id=”image” равную 100 пикселям.

$("#image").toggle(function()
 {
  $(this).animate({width: "300px"}, 1000);
  $('p').text("Click To Zoom Out");

Когда картинку кликнули, мы запускаем метод toggle. Используя “toggle”, мы можем задать две функции. Первая будет запущена, когда картинку кликнули первый раз. Вторая - когда второй раз кликнули по картинке. Это наилучшее при использовании расширяющихся/уменьшающихся элементов.

Когда картинка кликнута первый раз, мы собираемся взять “this” (картинка, по которой кликнули) и анимировать её. Мы изменим ширину картинки до 300 точек и раздвинем её в течении секунды.

}, function(){
 $(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");

Когда картинку кликнули во второй раз, мы изменяем ширину картинки назад к 100 точкам и изменяем текст параграфа.

Популярность: 28%