• 0

كيف أستعمل حلقة تكرار تضم div للحصول على animation؟

على صفحة Html، أتوفر على حلقة تكرار تفرز عناصر div، للحصول في آخر الأمر على نار متحركة، يمثل الشكل التالي كود السكريبت بـ Jquery:

var boxes = $('#inner>div');
var speeds = [
0.5, 0.5, 0.35, 0.45, 0.46, 0.55, 0.5, 0.5
];

function update() {
  var width = $('#wrapper').width;

  
  for (var i = 0; i < boxes.length; i++) {
    var box = boxes[i];
    var speed = speeds[i];

    box.left -= speed;

    if (box.left < -box.width) {
      cloud.left = width;
    }
  };
  window.setTimeout(update, 2000);
};

لكن الوظيفة السابقة لا تعطي أي تحرك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

عوّض الكود السابق بهذا المثال المرفق أسفله:

كود html:

<div id="wrapper">

  <div id="inner">
    <div class="move one">eight</div>
    <div class="move two">seven</div>
    <div class="move three">six</div>
    <div class="move four">five</div>

    <div class="move five">four</div>
    <div class="move six">three</div>
    <div class="move seven">two</div>
    <div class="move eight">one</div>
  </div>


</div>

ملف التنسيق css:

* {
  padding: 0px;
  margin: 0px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0% auto;
  overflow: hidden;
  position: absolute;
}

#inner {
  width: 100%;
  height: 20vmin;
  position: absolute;
  top: 60%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {
  width: 15vw;
  height: 10vw;
  border: 4px solid #222;
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-size: 2vmin;
  line-height: 10vw;
  cursor: pointer;
}

.one {
  margin-left: 0px;
}

كود Jquery المسؤول عن تحريك Divs:

$(function() {


  console.log($('.eight').offset());

  function loop() {
    $('.move').css({
      left: '-90%',
    });

    $('.move').animate({
      left: '100%'
    }, 20500, 'linear', function() {
      loop();
    });

  }

  loop();


});

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن