I have this code:
The problem is, i cant add the 'active' class to the getJson's images inside the mac div. Would integrating a live function here help at all?
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59597329@N08&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img src='" + item.media.m + "'></img>").appendTo("#mac");
});
});
$("#mac img:first").addClass('active');
function slideSwitch() {
var $active = $('#mac img.active');
if ( $a开发者_如何学Pythonctive.length == 0 ) $active = $('#mac img:last');
var $next = $active.next().length ? $active.next()
: $('#mac img.active');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( slideSwitch, 5000 );
});
You didn't say what you actually want to do. One solution would be to put all code that has to work on DOM inside the ready
handler and fire the interval once the data is loaded:
function slideSwitch() {
var $active = $('#mac img.active');
if ( $active.length == 0 ) $active = $('#mac img:last');
var $next = $active.next().length ? $active.next() : $('#mac img.active');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59597329@N08&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img src='" + item.media.m + "'></img>").appendTo("#mac");
});
$("#mac img:first").addClass('active');
setInterval( slideSwitch, 5000 );
});
});
精彩评论