0

This is the code I'm using to achieve a simple fade out, fade next in effect.

var fadeLoop = function($el) {
    $el.delay( 5000 ).fadeOut(500, function() {
        var $next = $el.next();
        if ($next.length == 0) {
            $next = $el.siblings(":first");
        }
        $next.fadeIn(500, function() {
            fadeLoop($next);
        });
    });
};

$(document).ready(function(){
    $.noConflict();
    $(".fade1").siblings().hide();
    fadeLoop($(".fade1"));
});

The trouble is, I'm trying to implement this on a Mybb forum which uses jquery 1.8.0. I've tried simply changing the linked JQ version to 1.8.3, which breaks a lot of forum features, so I've come to the conclusion that i simply must re-write this to be compatible with 1.8.0. The problem is, I don't know how to do that. Thanks for anyone who can help me out. I appreciate it.

  • I expect `$.noConflict()` is doing more harm than good. Is it part of your attempt to fix the problem? – Roamer-1888 Dec 05 '15 at 03:18
  • [Starting with jQuery 1.11.0](http://jsfiddle.net/stave4h2/), all the code needed was the removal of `$.noConflict()`. Then, it also worked with all other versions offered by jsFiddle - v1.10.1, v1.9.1, v1.8.3, v1.7.2, v1.6.4. I would be surprised if the fixed version didn't work under jQuery 1.8.0, though I suppose it's possible. – Roamer-1888 Dec 05 '15 at 04:10
  • WOW. removing $.noConflict(); actually fixed the issue with my quick edit button on my forums, which was the whole reason i thought i had to re-code. Thanks a lot, I can't believe how silly that was. – Jaiden Watling Dec 06 '15 at 07:12

1 Answers1

0

I put together a test on jsfiddle and tried a couple different versions of jQuery (1.6.4, 1.7.2, 1.8.3) without issue. I think you might have a different issue that is not related to jQuery, as your current code works fine. Here is my code (required for a link to jsfiddle.net)

HTML

<div>
 <div class="foo fade1">A</div>
 <div class="foo">B</div>
 <div class="foo">C</div>
 <div class="foo">D</div>
</div>

CSS

.foo {
  background-color: red;
  color: white;
  padding: 10px;
}

JavaScript

var fadeLoop = function($el) {
  $el.delay( 5000 ).fadeOut(500, function() {
    var $next = $el.next();
    if ($next.length == 0) {
        $next = $el.siblings(":first");
    }
    $next.fadeIn(500, function() {
        fadeLoop($next);
    });
  });
};

$(document).ready(function(){
  $(".fade1").siblings().hide();
  fadeLoop($(".fade1"));
});

And the jsfiddle link: https://jsfiddle.net/0v9zxwp5/1/

Click the gear icon next to the word JAVASCRIPT to change the jQuery versions.

Fraser Crosbie
  • 1,672
  • 1
  • 12
  • 21