我很难找到一种将效果应用于我正在制作的 jquery 插件的方法,我已经让它工作了,但这不是我真正想要的方式,所以我需要一些指导
Jquery 插件将图像分割成 div 的小方块,这样我就可以从角落开始应用淡入淡出效果,现在每个 div 都有相同的 CSS 类,但名称不同,它们的名称是根据顺序给出的div必须出现......问题是我现在不知道如何让所有名称为3的div同时淡入..这是代码
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="jquery.js" type="text/javascript"></script>
<script src="separar.js" type="text/javascript"></script>
<title>AEMB Portales Web</title>
</head>
<body>
<div id="contenedor" style="width:800px; height:508px; position:relative; margin:0 auto;">
<a href="#"><img src="img/fma.jpg" /></a>
</div>
<script>
$(document).ready(function(){
$("#contenedor").separar(4);
});
</script>
</body>
</html>
查询插件
(function($){
$.fn.separar = function(cantidad){
var contenedor = $(this);
var slides = $(this).children();
var altoTotal = contenedor.height();
var lastId = 0;
separarslides(contenedor,slides[0]);
aparecer();
function separarslides(slider, hijo) {
var imagen = hijo.children[0];
$(hijo).hide();
var anchoSlide = Math.round(slider.width()/cantidad);
var altoSlide = Math.round(slider.height()/cantidad);
var id = 0;
var idFila = 1;
for(var j = 0; j < altoTotal; j+=altoSlide){
id = idFila;
for(var i = 0; i < cantidad; i++){
slider.append(
$('<div class="slice'+id+'" style="position:absolute;" name="'+id+'"><img src="'+ $(imagen).attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:'+slider.height()+'px; display:block !important; top:'+ j*-1 +'px;; left:'+ i * anchoSlide*-1 +'px;" /></div>').css({
left:(anchoSlide*i)+'px',
top:j+'px',
width:anchoSlide+'px',
height:altoSlide+'px',
opacity:'0',
overflow:'hidden'
})
);
lastId = id;
id++;
if(i==3)
idFila++;
}
}
//slider.append($(alert(lastId))); //Para ver el numero final que tiene lastId
}
function aparecer(){
var slices = $('.slice', contenedor);
var time = 500;
for(i=1;i<=lastId;i++){
$(".slice"+i).fadeTo(time,1);
time+=650;
}
}
}
})(jQuery);
javascript 中的最后一个函数负责显示 div,但在这种情况下,div 有不同的类,我怎样才能通过 div 的名称来制作它?