Skip to content

Instantly share code, notes, and snippets.

@Takazudo

Takazudo/fiddle.css

Created August 22, 2011 11:54
Show Gist options
  • Save Takazudo/1162219 to your computer and use it in GitHub Desktop.
Save Takazudo/1162219 to your computer and use it in GitHub Desktop.
Download ZIP
$.fn.autoSwap
Raw
fiddle.css
.js .alt{
display:none;
}
.test{
border:1px solid #000;
margin:0 0 10px;
padding:10px;
}
Raw
fiddle.html
<!-- I recommend to attach this no-js class to "html" element. -->
<div class="no-js">
<div class="test">
<div class="item">1. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
</div>
<div class="test">
<div class="item">1. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">2. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">3. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">4. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
</div>
<div class="test">
<div class="item">1. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">2. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">3. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">4. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
<div class="item alt">5. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. The quick brown fox foobar foobar. </div>
</div>
</div>
Raw
fiddle.js
$.fn.autoSwap = function(options){
var o = $.extend({
class_item: '.item',
class_alt: '.alt',
interval: 3000,
fadeDuration: 800
}, options);
return this.each(function(){
var $items = $(o.class_item, this);
var i = 0;
var max = $items.size() - 1;
if(max < 1){
return;
}
swap();
function swap(){
setTimeout(function(){
var currentIndex = i;
var nextIndex = i + 1;
if(nextIndex > max){
nextIndex = 0;
i = 0;
}else{
i++;
}
var $current = $items.eq(currentIndex);
var $next = $items.eq(nextIndex);
$current.hide();
$next.fadeIn(o.fadeDuration, swap);
}, o.interval);
}
});
};
$(function(){
/* You should put class="js" to "html" element and,
This should be put outside of this ready event handler. */
$('.no-js').removeClass('no-js').addClass('js');
/* do it */
$('.test').autoSwap();
});
Raw
fiddle.manifest
name: $.fn.autoSwap
description: swap contents automatically. https://gist.github.com/1162219 http://jsfiddle.net/gh/gist/jQuery/1.6.2/1162219/
authors:
- Takeshi Takatsudo
normalize_css: no
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment