Apply jquery effect for divs of the same name property

StackOverflow https://stackoverflow.com/questions/15300793

Question

I'm having trouble in finding a way of applying an efect to a jquery plugin I'm making, I already have it working, but that's not the way I really wanted so I need a some guidance

The Jquery plug-in separate an image into small squares that are divs so I can apply a fade in effect starting from the corner, now every div has the same CSS class, but different names, their names are given according to the order in which the divs have to apear... the problem is that I dont now how to make all divs with name 3 for example fade in at the same time.. here is the code

THE 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>

JQUERY PLUGIN

(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);

the last function in the javascript is in charge of appearing the divs, but in that case the divs have different classes, how can i make it by the name of the divs?

Was it helpful?

Solution 2

Here is a selector that works for your case :

$('div[name="3"]')

OTHER TIPS

First off, I am pretty sure you shouldn't use the name attribute on a <div> element.

So why don't you just use the classname as it uses the same id as your name attribute?

$('.slice3')

EDIT: Here is an example of how I would structure it:

...
slider.append(
    $('<div class="slice slice'+id+'" style="position:absolute;"><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'
    })
);  
...

Now you can add some CSS to all the slice classes and jQuery to a specific slice3 class.

CSS:

slice {
    background: green:
}

JS:

$('.slice3').click(...);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top