lets say I have this divs:
Js files needed: Jquery & Jquery UI
<div id="news-content">
<div class="item current"><strong>Example 1</strong></div>
<div class="item"><strong>Example 2</strong></div>
</div>
Im have this code:
var News = {
init : function(){
$('#news-content')
.find('.item:first-child')
.addClass('current')
.show('slide',{direction:"up"},500);
$('#news-content')
.find('.item:first-child')
.addClass('current')
.delay(1000)
.hide('slide',{direction:"down"},500);
},
show : function() {
//开发者_如何学编程 ...
}
}
$(document).ready(News.init)
After the init - I want to catch the next "item" after "current" class and make the same operation as "init" on it. how can I do it with jquery?
I am not so sure if i meet your requirement but i have something to show you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<style>
.item{
color: black;
background: green;
}
.current{
color: red;
background: yellow;
}
</style>
<script>
$(function (){
show();
});
var current;
function show()
{
if(current == null){
current = $("#news-content div.item:first-child")
}
else{
$(current).attr({"class": "item"});
//do the transition for old here back to normal
current = $(current).next();
if(!current){
return false;
}
}
$(current).attr({"class": "current"});
//do the animation for current slide here
setTimeout("show()", 4000);
}
</script>
<div id="news-content">
<div class="item"><strong>Example 1</strong></div>
<div class="item"><strong>Example 2</strong></div>
<div class="item"><strong>Example 3</strong></div>
<div class="item"><strong>Example 4</strong></div>
<div class="item"><strong>Example 5</strong></div>
<div class="item"><strong>Example 6</strong></div>
<div class="item"><strong>Example 7</strong></div>
<div class="item"><strong>Example 8</strong></div>
</div>
精彩评论