मेरे पास divs हैं जो स्वचालित रूप से अगले div पर जाते हैं और हर कुछ सेकंड के बाद इसकी सामग्री दिखाते हैं। कार्यक्षमता ठीक काम करती है हालांकि, ऐसा लगता है कि आखिरी div छुपाता है और पहला div दिखाने के लिए होता है क्योंकि div के लिए संबंधित लिंक में रेखांकन में थोड़ी देरी होती है- इसे तुरंत बदलना चाहिए। मैं समझ नहीं पा रहा हूं कि ऐसा क्यों हो रहा है। साथ ही, मैं पृष्ठ लोड होने के 5 सेकंड बाद फ़ंक्शन निष्पादित करने का प्रयास कर रहा हूं .delay(5000) काम नहीं कर रहा है। नीचे कोड है:

var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
var currentLink = 0;
var hovered = false;

$(".home-link").hover(function() {
  hovered = true;
  $('.home-' + homeLinks[currentLink]).hide();
  $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
  currentLink = homeLinks.indexOf($(this).attr('data-hover'));
  $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
  $('.home-' + homeLinks[currentLink]).show();
}, function() {
  hovered = false;
});

var autoNavInterval = setInterval(autoNav, 3000);

function autoNav() {
  if (hovered === false) {
    $('.home-' + homeLinks[currentLink]).hide();
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    currentLink++;
    if (currentLink >= homeLinks.length) {
      currentLink = 0;
    }
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    $('.home-' + homeLinks[currentLink]).show();
  }
}
.left-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">

  <div class="wpb_wrapper">
    <p class="home-i-t">TEXT One</p>
    <p class="home-o-c">TEXT One</p>
    <p class="home-c-f">TExt for C f.</p>
    <p class="home-i-c">Some more text fo i c.</p>
    <p class="home-c-u">Get in touch </p>

  </div>
</div>



<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">

  <div class="wpb_wrapper">
    <ul class="pivot-nav">
      <li class="pivot-nav-item"><a data-hover="o-c" class="home-link" href="#" data-toggle="my-scrollspy-2">O C</a></li>
      <li class="pivot-nav-item"><a data-hover="c-f" class="home-link" href="#" data-toggle="my-scrollspy-2">C F</a></li>
      <li class="pivot-nav-item"><a data-hover="i-c" class="home-link" href="#" data-toggle="my-scrollspy-2">I C</a></li>
      <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-hover="c-u" class="home-link" href="#">C U</a></li>
    </ul>

  </div>
</div>
0
user38208 30 अक्टूबर 2019, 09:18

1 उत्तर

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

पृष्ठ लोड होने के 5 सेकंड बाद कार्य शुरू करने के लिए पहले आपको यह सुनिश्चित करने की आवश्यकता है कि दस्तावेज़ तैयार होने के बाद आपकी स्क्रिप्ट काम करना शुरू कर दे। मूल jQuery फ़ंक्शन $(function () { /* code executed after the document loaded */ } ); का उपयोग करें। साधारण जावास्क्रिप्ट फ़ंक्शन सेटटाइमआउट का उपयोग करें।

रेखांकन C U और O C के बीच लंबे समय तक स्विच किया गया क्योंकि आपने सरणी homeLinks में प्रत्येक तत्व के माध्यम से पुनरावृति करने के बाद currentLink मान 0 पर सेट किया है और 0 तत्व डेटा-होवर के साथ a होगा = "यह" जो मौजूद नहीं है। आप सरणी से पहली स्ट्रिंग को हटा सकते हैं या सूची में एक तत्व बना सकते हैं या currentLink मान को 1 पर सेट कर सकते हैं जब आप currentLink के साथ होमलिंक्स मान पर पहुंच जाते हैं।

मैंने आपके स्क्रिप्ट कोड को ठीक वही करने के लिए तय किया है जो आपने यथासंभव कम से कम परिवर्तनों के साथ वर्णित किया है:

$(function () {

  var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
  var currentLink = 0;
  var hovered = false;

  $(".home-link").hover(function () {
    hovered = true;
    $('.home-' + homeLinks[currentLink]).hide();
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    currentLink = homeLinks.indexOf($(this).attr('data-hover'));
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    $('.home-' + homeLinks[currentLink]).show();
  }, function (event) {
    hovered = false;
    currentLink = 0;
    $('.wpb_wrapper p').hide();
    $(event.target).toggleClass('default-underline');
  });

  setTimeout(() => {
    var autoNavInterval = setInterval(autoNav, 1000);
  }, 1000);


  function autoNav() {

    if (hovered === false) {
      $('.home-' + homeLinks[currentLink]).hide();
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      currentLink++;
      if (currentLink >= homeLinks.length) {
        currentLink = 1;
      }
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      $('.home-' + homeLinks[currentLink]).show();
    }
    else {
    }
  }

});
2
Piotr Obrębski 30 अक्टूबर 2019, 08:22