call a jquery function depending on selected option
i have a tab menu with different categories:
<ul class="feed-tabs">
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
</ul>
When i click in a tab it shows the corresponding div:
<div id="feeds-container">
<div class="feed-category1">
<div><p >cat1-1</p></div>
<div><p >cat1-2</p></div>
<div><p >cat1-3</p></div>
<div><p >cat1-4</p></div>
</div>
<div class="feed-category2">
<div><p >cat2-1</p></div>
<div><p >cat2-2</p></div>
<div><p >cat2-3</p></div>
<div><p >cat2-4</p></div>
</div>
<div cl开发者_如何学运维ass="feed-category3">
<div><p >cat3-1</p></div>
<div><p >cat3-2</p></div>
<div><p >cat3-3</p></div>
<div><p >cat3-4</p></div>
</div>
<div class="feed-category4">
<div><p >cat4-1</p></div>
<div><p >cat4-2</p></div>
<div><p >cat4-3</p></div>
<div><p >cat4-4</p></div>
</div>
</div>
in that divs i want to use this function:
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 400;
var pause = 3500;
function removeFirst(){
first = $('div.feed-category1 div:first').html();
$('div.feed-category1 div:first')
.animate({opacity: 0}, speed)
.fadeOut('100', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<div style="display:none">'+first+'</div>';
$('div.feed-category1').append(last)
$('div.feed-category1 div:last')
.animate({opacity: 1}, speed)
.fadeIn('1000')
}
interval = setInterval(removeFirst, pause);
});
</script>
which works as a news ticker. Now it only works with 'feed-category1' because its hardcoded in the jquery function.
How can i make it work for all categories.
the sample code is this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://static.cdncast.com/anyblog/frontpagev2/js/jquery.tools.min.js"></script>
<style>
ul.feed-tabs { list-style:none; }
ul.feed-tabs li { float: left; text-decoration: none; padding: 0 20px; cursor: pointer; }
hr { clear:both; }
</style>
<script type="text/javascript">
$(function() {
$("ul.feed-tabs").tabs("#feeds-container > div", { effect: 'fade', fadeInSpeed : 700, current : 'current', tabs : 'li' });
});
$(document).ready(function(){
var first = 0;
var speed = 400;
var pause = 3500;
function removeFirst(){
first = $('div.feed-category1 div:first').html();
$('div.feed-category1 div:first')
.animate({opacity: 0}, speed)
.fadeOut('100', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<div style="display:none">'+first+'</div>';
$('div.feed-category1').append(last)
$('div.feed-category1 div:last')
.animate({opacity: 1}, speed)
.fadeIn('1000')
}
interval = setInterval(removeFirst, pause);
});
</script>
</head>
<body>
<div id="header">
<ul class="feed-tabs">
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
</ul>
</div>
<hr>
<div id="feeds-container">
<div class="feed-category1">
<div><p >cat1-1</p></div>
<div><p >cat1-2</p></div>
<div><p >cat1-3</p></div>
<div><p >cat1-4</p></div>
</div>
<div class="feed-category2">
<div><p >cat2-1</p></div>
<div><p >cat2-2</p></div>
<div><p >cat2-3</p></div>
<div><p >cat2-4</p></div>
</div>
<div class="feed-category3">
<div><p >cat3-1</p></div>
<div><p >cat3-2</p></div>
<div><p >cat3-3</p></div>
<div><p >cat3-4</p></div>
</div>
<div class="feed-category4">
<div><p >cat4-1</p></div>
<div><p >cat4-2</p></div>
<div><p >cat4-3</p></div>
<div><p >cat4-4</p></div>
</div>
</div>
</body>
</html>
Have a look at this:
http://jsfiddle.net/dgH3S/
I modified removeFirst to the below code and removed the other method entirely. The trick is that I loop through all of the divs directly within #feeds-container and use this to target each individually. The other modification I made is to simply move the element rather than removing it and creating a new one each time.
function removeFirst() {
$("#feeds-container > div").each(function() {
first = $(this).find('div:first').animate({
opacity: 0
}, speed).fadeOut('100', function() {
$(this).appendTo($(this).parent()).animate({
opacity: 1
}, speed).fadeIn('1000');
});
});
}
Alternatively, for better performance you may want to just target the active tab instead of animating all tabs even if they are not shown. I don't know that library well enough to tell you how to figure out which is active (may just be able to use not(":hidden")).
加载中,请稍侯......
精彩评论