макалалар

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>

Сап алдын алаdefiNita '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>
método 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>
método 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>
método 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>

Анимация эффекттери

método 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>

Ошондой эле, мүмкүн defiанимацияланган касиеттер үчүн салыштырмалуу баалуулуктар. Эгерде маани префикс менен көрсөтүлсө += 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>
método stop()

jQuery ыкмасы stop() Учурдагы jQuery анимацияларын же тандалган элементтердеги эффекттерди аягына чейин иштетүүнү токтотуу үчүн колдонулат.

Методдун негизги синтаксиси stop() jQuery менен берилиши мүмкүн:

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

Жогорудагы синтаксистеги параметрлер төмөнкүдөй мааниге ээ:

  • Il кошумча параметр логикалык 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 GLI 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>

чалуу

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

Инновациялык бюллетень
Инновация боюнча эң маанилүү жаңылыктарды өткөрүп жибербеңиз. Аларды электрондук почта аркылуу алуу үчүн катталыңыз.
Tags: Код

акыркы макалалар

Veeam ransomware үчүн коргоодон баштап жооп кайтарууга жана калыбына келтирүүгө чейин эң комплекстүү колдоону камтыйт

Veeam тарабынан Coveware кибер опузалап инциденттерге жооп берүү кызматтарын көрсөтүүнү улантат. Coveware криминалистика жана ремедиация мүмкүнчүлүктөрүн сунуштайт ...

April 23 2024

Жашыл жана санариптик революция: алдын ала тейлөө мунай жана газ өнөр жайын кантип өзгөртөт

Болжолдуу тейлөө заводду башкарууга инновациялык жана жигердүү мамиле кылуу менен мунай жана газ секторун революция кылып жатат.…

April 22 2024

Улуу Британиянын монополияга каршы жөнгө салуучу органы GenAI боюнча BigTech коңгуроосун көтөрөт

Улуу Британиянын CMA жасалма интеллект рыногунда Big Tech жүрүм-туруму жөнүндө эскертүү берди. Ал жерде…

April 18 2024

Casa Green: Италияда туруктуу келечек үчүн энергетикалык революция

Имараттардын энергетикалык натыйжалуулугун жогорулатуу үчүн Европа Биримдиги тарабынан иштелип чыккан "Case Green" Декрети өзүнүн мыйзам чыгаруу процессин аяктады ...

April 18 2024

Инновацияны өз тилиңизде окуңуз

Инновациялык бюллетень
Инновация боюнча эң маанилүү жаңылыктарды өткөрүп жибербеңиз. Аларды электрондук почта аркылуу алуу үчүн катталыңыз.

бизди ээрчи