JQuery bilan bir qatorda har bir belgi qanday qo'lga olaman?

Har bir belgi bir satrda bo'lmoqchiman, shunda HTML-ga tegmasdan ularni jonlantira olaman.

Misol uchun :

I am a title


Maqsad, barcha harflarni ushlab turishdir, shuning uchun ularni 0.1 soniyada ko'taradigan animatsiya va o'tish bilan bir-birining or-nomusiga aylantira olaman. Muammo shundaki, buni qanday qilishni bilmayman! Men h1-da textNode-ga ega bo'lishni va keyin har bir belgini oladigan forEach döngüsü bilan ajratish kerak, deb o'ylayman, lekin yozolmayman, buni amalga oshirish usulini bilmayman, chunki jQuery bilan yangi boshlovchi . Bu kishi bilan menga yordam bera oladigan kishi bormi?

1
Siz nimani sinab ko'rdingiz? Kodni bu yerga qo'shing.
qo'shib qo'ydi muallif divy3993, manba
Bu, odatda, foydali bo'lishi mumkin: codecademy.com/learn/jquery
qo'shib qo'ydi muallif Trevor, manba
Bu, odatda, foydali bo'lishi mumkin: codecademy.com/learn/jquery
qo'shib qo'ydi muallif Trevor, manba
Men bu yo'nalishda biror narsani sinab ko'rmadim, kodni qanday yozishni bilmasdim! Endi barcha javoblar va sovet echimlari bilan men qanday ishlayotganimni juda yaxshi bilaman!
qo'shib qo'ydi muallif GBCrafty, manba
Men bu yo'nalishda biror narsani sinab ko'rmadim, kodni qanday yozishni bilmasdim! Endi barcha javoblar va sovet echimlari bilan men qanday ishlayotganimni juda yaxshi bilaman!
qo'shib qo'ydi muallif GBCrafty, manba

11 javoblar

Siz quyidagilarni sinab ko'rishingiz mumkin:

var str=$("h1").text();
1
qo'shib qo'ydi

Bir turdagi effektni bajarish uchun siz h1dan mag'lubiyatni qabul qilishingiz va keyinchalik harflarni asta-sekin qayta kiritish uchun asnitsimon loopdan foydalanishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var text = $('h1').text();
var pos = 0;
var delay = 200;//milliseconds

function typeon() {
  pos++;
  var typedText = text.substr(0, pos);
  $('h1').text(typedText);
  
  if (pos < text.length) {
   //call itself after delay, an async loop
    setTimeout(typeon, delay);
  }
}

// start
typeon();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This is a Type-on Effect

</div> </div>

0
qo'shib qo'ydi
Rahmat, bu men qidirayotganimning o'zi va u ajoyib ishlaydi!
qo'shib qo'ydi muallif GBCrafty, manba

Bir turdagi effektni bajarish uchun siz h1dan mag'lubiyatni qabul qilishingiz va keyinchalik harflarni asta-sekin qayta kiritish uchun asnitsimon loopdan foydalanishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var text = $('h1').text();
var pos = 0;
var delay = 200;//milliseconds

function typeon() {
  pos++;
  var typedText = text.substr(0, pos);
  $('h1').text(typedText);
  
  if (pos < text.length) {
   //call itself after delay, an async loop
    setTimeout(typeon, delay);
  }
}

// start
typeon();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This is a Type-on Effect

</div> </div>

0
qo'shib qo'ydi
Rahmat, bu men qidirayotganimning o'zi va u ajoyib ishlaydi!
qo'shib qo'ydi muallif GBCrafty, manba

Sizning ehtiyojlaringizga mos keladigan bunday narsa bormi?

$('h1').text().split('');//== ['I', ' ', 'a', 'm', ' ', 'a', ' ', 't', 'i', 't', 'l', 'e'];

$('h1')
  .text()
  .split('')
  .forEach(function(c){
   //Do something with each letter
  });

Qanday jQuery holda shunday qilish mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document
  .querySelector('h1')
  .textContent
  .split('')
  .forEach(function(c){
   //Do something with each letter here
  });

I am a title

</div> </div>

0
qo'shib qo'ydi

Sizning ehtiyojlaringizga mos keladigan bunday narsa bormi?

$('h1').text().split('');//== ['I', ' ', 'a', 'm', ' ', 'a', ' ', 't', 'i', 't', 'l', 'e'];

$('h1')
  .text()
  .split('')
  .forEach(function(c){
   //Do something with each letter
  });

Qanday jQuery holda shunday qilish mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document
  .querySelector('h1')
  .textContent
  .split('')
  .forEach(function(c){
   //Do something with each letter here
  });

I am a title

</div> </div>

0
qo'shib qo'ydi
var h1Content = jQuery("h1").text();//You may want to use an id or class to have more control over this
var h1ContArr = h1Content.split("");//You now have an array holding each character inside 

Now you can use a loop on h1ContArr

0
qo'shib qo'ydi
var h1Content = jQuery("h1").text();//You may want to use an id or class to have more control over this
var h1ContArr = h1Content.split("");//You now have an array holding each character inside 

Now you can use a loop on h1ContArr

0
qo'shib qo'ydi

Mana bir usul:

First, make sure the h1 is empty:

Then, add a span inside with just one letter:

I

Sizning talabingiz bo'yicha o'lchami

Keyinchalik, h1 ningnerHTMLni oldingi harflar oralig'i tashqarisida va keyingi harflar oralig'ida joylashgan tarzda o'zgartiring:

I a

I am

I am a

va boshqalar..

Ba'zi mos yozuvlar kodlari:

var str = "I am a title"
str.split("").forEach(function (d, idx, arr) {
    var _retStr = '

' + arr.slice(0,idx).join("") + '' + arr[idx] + '

';
    $('h1').innerHTML = _retStr;
});
0
qo'shib qo'ydi

Mana bir usul:

First, make sure the h1 is empty:

Then, add a span inside with just one letter:

I

Sizning talabingiz bo'yicha o'lchami

Keyinchalik, h1 ningnerHTMLni oldingi harflar oralig'i tashqarisida va keyingi harflar oralig'ida joylashgan tarzda o'zgartiring:

I a

I am

I am a

va boshqalar..

Ba'zi mos yozuvlar kodlari:

var str = "I am a title"
str.split("").forEach(function (d, idx, arr) {
    var _retStr = '

' + arr.slice(0,idx).join("") + '' + arr[idx] + '

';
    $('h1').innerHTML = _retStr;
});
0
qo'shib qo'ydi

Avval nomingizning mazmunini olishingiz kerak.

var title = document.querySelector('h1').textContent

So'ngra men sizni o'zingizning o'zgaruvchan harf bilan harfini ko'rsatadigan pastadir qilishingizni tavsiya qilaman.

for (var i = 0; i < title.length; i++) {
        tmp = title.substring(i);
        $('#WhereYouDisplay').text(tmp);
    };

Iltimos, shunga o'xshash biror ishni qilishga harakat qiling va bizga muvaffaqiyatli yoki yo'qligini ayting.

0
qo'shib qo'ydi

Avval nomingizning mazmunini olishingiz kerak.

var title = document.querySelector('h1').textContent

So'ngra men sizni o'zingizning o'zgaruvchan harf bilan harfini ko'rsatadigan pastadir qilishingizni tavsiya qilaman.

for (var i = 0; i < title.length; i++) {
        tmp = title.substring(i);
        $('#WhereYouDisplay').text(tmp);
    };

Iltimos, shunga o'xshash biror ishni qilishga harakat qiling va bizga muvaffaqiyatli yoki yo'qligini ayting.

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb