मैंने वर्ग नाम "छवि-भाग" के तहत कई div-elements बनाए हैं और इस स्क्रिप्ट का उपयोग करके उन्हें एनिमेट करने का प्रयास कर रहा हूं:

$(document).ready(function() {
  $('.image-part').each(function() {
    var id = setInterval(frame, 3000);

    function frame() {
      if ($(this).css("visibility") === "hidden") {
        $(this).css("visibility", "visible");
      } else {
        $(this).css("visibility", "hidden");
      }
    }
  });
});
.image-part {
  width: 33.33%;
  height: 60px;
  background-color: black;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part" style="visibility:hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>

कुछ नहीं हो रहा है, क्या कोई मदद कर सकता है? धन्यवाद!

2
AgnesAronsson 5 जिंदा 2018, 11:26

1 उत्तर

सबसे बढ़िया उत्तर

समस्या इसलिए है क्योंकि setInterval() हैंडलर के भीतर this का दायरा किसी भी .image-part तत्वों का संदर्भ नहीं होगा।

इसे ठीक करने के लिए आप तर्क को फिर से व्यवस्थित कर सकते हैं ताकि आप अंतराल के भीतर each() लूप भीतर निष्पादित कर सकें, जैसे:

$(document).ready(function() {
  setInterval(function() {
    $('.image-part').css('visibility', function(i, v) {
      return v == 'visible' ? 'hidden' : 'visible';
    });
  }, 3000);
});
.image-part {
  width: 33.33%;
  height: 60px;
  background-color: black;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part" style="visibility:hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>

ध्यान दें कि मैंने प्रदान किए गए फ़ंक्शन के साथ css() को एक कॉल का उपयोग करके तर्क को और अधिक संक्षिप्त होने के लिए बदल दिया है। परिणाम आपके मूल इरादे के समान है, यद्यपि।

4
Rory McCrossan 5 जिंदा 2018, 11:32