Статті

JQuery, як ми можемо реалізувати динамічні ефекти за допомогою JQuery

За допомогою JQuery ви можете створювати динамічні ефекти, анімацію та затухання, впливаючи на елементи сторінки HTML.

У цій статті ми побачимо, як використовувати різні методи JQuery для створення анімації.

Приховати та показати елемент HTML

методи hide() І show()

Метод hide() просто встановлює вбудований стиль display: none для вибраних елементів. І навпаки, метод show() відновлює властивості дисплея. 

Давайте подивимося на приклад:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

У першому випадку абзац приховується при натисканні на кнопку (hide-btn), у другому випадку абзац відображається при натисканні на кнопку (show-btn).

Ви також можете вказати параметр тривалості, щоб анімувати ефект показу та приховування протягом певного періоду часу.

Тривалість можна вказати за допомогою одного з попередніх рядківdefiніт 'slow''fast', або в мілісекундах, для більшої точності; вищі значення вказують на повільнішу анімацію.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

Рядок predefiніта 'fast' вказує на тривалість 200 мілісекунд, тоді як рядок 'slow' вказує на тривалість 600 мілісекунд.

Ми можемо вказати функцію callback буде виконано після завершення методу show() або з hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>
Метод перемикання

Метод jQuery toggle() показувати або приховувати елементи таким чином, що якщо елемент спочатку відображається, він буде прихований; навпаки, якщо приховано, воно буде показано (практично вимикає його видимість).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Аналогічно можна вказати параметр duration для методу toggle(), таким чином, щоб анімувати перехід між видимими та прихованими, як методи show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

Так само можна вказати функцію callback для методу toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

Ефекти згасання jQuery

методи fadeIn()fadeOut()

Ви можете використовувати методи jQuery fadeIn()fadeOut() щоб показати або приховати елементи HTML, поступово збільшуючи або зменшуючи їх непрозорість і створюючи ефект згасання.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Як і для інших методів ефектів jQuery, ви можете додатково вказати тривалість або параметр швидкості для методів fadeIn()fadeOut(), щоб контролювати тривалість затухання. Тривалість можна вказати за допомогою одного з попередніх рядківdefiніт 'slow''fast', або в кількості мілісекунд; вищі значення вказують на повільнішу анімацію.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

ефект методів fadeIn()fadeOut() Це схоже на show()hide(), але на відміну від методів show()hide(), перший анімує лише непрозорість цільових елементів і не анімує їхній розмір.

Також ви можете вказати функцію callback для запуску після завершення методів fadeIn()fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>
Metodo fadeToggle()

Метод jQuery fadeToggle() відображає або приховує вибрані елементи шляхом анімації їх непрозорості так, що якщо елемент спочатку відображається, він буде зникати; якщо він був прихований, він зникає (тобто вмикає ефект згасання).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Ви також можете вказати параметр тривалості життя для методу fadeToggle() що стосується методів fadeIn()fadeOut(), щоб керувати тривалістю або швидкістю затухання анімації.

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

Метод fadeToggle() також має можливість вказати функцію callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>
Metodo fadeTo()

Метод jQuery fadeTo() це схоже на метод fadeIn(), але на відміну від методу fadeIn(), метод fadeTo() дозволяє змішувати елементи до певного рівня непрозорості.

$(selector).fadeTo(speed, opacity, callback);

Необхідний параметр opacity визначає кінцеву непрозорість цільових елементів, яка може бути числом від 0 до 1. Параметр duration o speed це також потрібно для цього методу, який визначає тривалість затухання анімації.

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

Ефекти прокрутки

методи slideUp()slideDown()

Метод jQuery slideUp()slideDown() використовуються для приховування або показу елементів HTML шляхом поступового зменшення або збільшення їх висоти (тобто прокручування вгору або вниз).

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Як і для інших методів ефектів jQuery, ви можете додатково вказати тривалість або параметр швидкості для методів slideUp()slideDown() для керування тривалістю анімації слайда. Тривалість можна вказати за допомогою одного з попередніх рядківdefiніт 'slow''fast', або в кількості мілісекунд; вищі значення вказують на повільнішу анімацію.

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

Ви також можете вказати функцію зворотного виклику для виконання після завершення методу slideUp()slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>
Metodo slideToggle()

Метод jQuery slideToggle() показувати або приховувати вибрані елементи, анімуючи їхню висоту, щоб, якщо елемент спочатку відображається, він прокручувався вгору; якщо прихований, він буде прокручуватися вниз, тобто перемикатися між методами slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Так само ви можете вказати параметр тривалості життя для методу slideToggle() Приходити slideUp()slideDown().

Інноваційний бюлетень
Не пропустіть найважливіші новини про інновації. Підпишіться, щоб отримувати їх електронною поштою.
<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

Подібним чином ви також можете вказати функцію зворотного виклику для методу slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

Ефекти анімації

Metodo animate()

Метод jQuery animate() він використовується для створення власних анімацій. Метод animate() використовується для анімації числових властивостей CSS, таких як width, height, margin, padding, opacity, top, left тощо але нечислові властивості, як colorbackground-color їх неможливо анімувати за допомогою базової функціональності jQuery.

Основний синтаксис методу animate() це наступне:

$(selector).animate({ properties }, duration, callback);

Параметри методу animate() мають такі значення:

  • Необхідний параметр властивостей defiзавершіть властивості CSS для анімації.
  • Додатковий параметр тривалості вказує, скільки триватиме анімація. Тривалість можна вказати за допомогою одного з попередніх рядківdefiніт 'slow''fast', або в кількості мілісекунд; вищі значення вказують на повільнішу анімацію.
  • Додатковий параметр зворотного виклику — це функція, яка викликається після завершення анімації.

Нижче наведено простий приклад методу animate() який анімує зображення з початкового положення праворуч на 300 пікселів після натискання кнопки.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Ви також можете одночасно анімувати кілька властивостей елемента за допомогою цього методу animate(). Усі властивості були анімовані одночасно без будь-яких затримок.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Ви також можете анімувати кілька властивостей елемента окремо в черзі за допомогою функції конкатенації jQuery.

У наступному прикладі показано анімацію jQuery у черзі або в ланцюжку, де кожна анімація розпочнеться після завершення попередньої анімації елемента. Ми побачимо функцію конкатенації в наступній статті.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

Це також можливо definish відносні значення для анімованих властивостей. Якщо значення вказано з префіксом += o -=, цільове значення обчислюється шляхом додавання або віднімання вказаного числа від поточного значення властивості.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Окрім числових значень, кожна властивість може приймати рядки 'show''hide''toggle'. Це буде дуже корисно в ситуації, коли ви просто хочете анімувати властивість від її поточного значення до початкового значення і навпаки.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
Metodo stop()

Метод jQuery stop() використовується для зупинки поточної анімації jQuery або ефектів для вибраних елементів до завершення.

Основний синтаксис методу stop() jQuery можна надати за допомогою:

$(selector).stop(stopAll, goToEnd);

Параметри в наведеному вище синтаксисі мають такі значення:

  • Il необов'язковий параметр boolean stopAll, визначає, чи видаляти анімацію в черзі. ПопереднійdefiНіт є false, це означає, що лише поточну анімацію буде зупинено, решта анімацій у черзі буде виконано пізніше.
  • Логічний параметр goToEnd необов'язково вказує, чи завершувати поточну анімацію негайно. ПопереднійdefiНіт є false.

Ось простий приклад, що демонструє метод stop() у реальних діях, де ви можете запускати та зупиняти анімацію після натискання кнопки.

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Ось ще один приклад цього методу, коли ви знову натискаєте кнопкуSlide Toggle” після запуску анімації, але до її завершення, анімація негайно почнеться в протилежному напрямку від збереженої початкової точки.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Під час створення анімованого ефекту наведення однією з найпоширеніших проблем, з якою ви можете зіткнутися, є численні анімації, які стоять у черзі, коли ви швидко розміщуєте та видаляєте курсор миші. Чому в цій ситуації, mouseenter глі mouseleave події запускаються швидко до завершення анімації. Щоб уникнути цієї проблеми та створити приємний і плавний ефект наведення, ви можете додати stop(true, true)до ланцюжка методів, наприклад:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

Callback

Оператори JavaScript виконуються рядок за рядком. Однак, оскільки для завершення ефекту jQuery потрібен деякий час, код наступного рядка може працювати, коли попередній ефект все ще працює. Щоб цього не сталося, jQuery надає функцію зворотного виклику для кожного методу ефекту.

Функція зворотного виклику — це функція, яка запускається після завершення ефекту. Функція зворотного виклику передається як аргумент до методів ефекту, і вони зазвичай з’являються як останній аргумент методу. Наприклад, базовий синтаксис методу ефекту jQuery slideToggle() з функцією зворотного виклику, яку можна вказати наступним чином:

$(selector).slideToggle(duration, callback);

Розглянемо наступний приклад, де ми розмістили твердження slideToggle()alert()один біля одного. Якщо ви спробуєте цей код, сповіщення з’явиться одразу після натискання кнопки перемикання, не чекаючи завершення ефекту перемикання слайдів.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

А ось модифікована версія попереднього прикладу, де ми вставили оператор alert() всередині функції зворотного виклику для методу slideToggle(). Якщо ви спробуєте цей код, після завершення ефекту перемикання слайдів з’явиться попередження.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Так само ви можете defiзавершити функції зворотного виклику для інших методів ефекту jQuery, таких як show(), hide(), fadeIn()fadeOut()animate()тощо

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Якщо ви спробуєте зразок коду вище, ви отримаєте те саме попередження двічі для кожного елемента <h1><p>, після натискання кнопки активації.

BlogInnovazione.it

Інноваційний бюлетень
Не пропустіть найважливіші новини про інновації. Підпишіться, щоб отримувати їх електронною поштою.
Ключові слова: jquery

Останні статті

Ринок Smart Lock: опубліковано звіт про дослідження ринку

Термін Smart Lock Market стосується галузі та екосистеми, що оточує виробництво, розповсюдження та використання…

27 березня 2024

Що таке шаблони проектування: навіщо їх використовувати, класифікація, плюси і мінуси

У розробці програмного забезпечення шаблони проектування є оптимальним вирішенням проблем, які зазвичай виникають під час проектування програмного забезпечення. Мені подобається…

26 березня 2024

Технологічний розвиток промислового маркування

Промислове маркування — це широкий термін, який охоплює кілька методів, які використовуються для створення стійких позначок на поверхні…

25 березня 2024

Приклади макросів Excel, написаних за допомогою VBA

Наступні прості приклади макросів Excel були написані за допомогою VBA Приблизний час читання: 3 хвилини Приклад…

25 березня 2024

Читайте Innovation своєю мовою

Інноваційний бюлетень
Не пропустіть найважливіші новини про інновації. Підпишіться, щоб отримувати їх електронною поштою.

Слідуйте за нами