2
\$\begingroup\$

I'm trying to put lots of buttons inside a div with a bunch of little windows that make content change in a neighbor div, but I’m quite new to jQuery and I'm sure that this code can be much simpler.

It works, but it's just that I can see it's too long and repetitive I'm sure that it can be downsized.

jQuery(function($) {
function boton1(event)
{
$(".vitrina1").css("opacity","0");
$(".vitrina1").css("top","0");
$(".vitrina1").animate({"opacity":1,"top":0},300, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton2(event)
{
$(".vitrina2").css("opacity","0");
$(".vitrina2").css("top","-712px");
$(".vitrina2").animate({"opacity":1,"top":-712},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton3(event)
{
$(".vitrina3").css("opacity","0");
$(".vitrina3").css("top","-1424px");
$(".vitrina3").animate({"opacity":1,"top":-1424},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton4(event)
{
$(".vitrina4").css("opacity","0");
$(".vitrina4").css("top","-2136px");
$(".vitrina4").animate({"opacity":1,"top":-2136},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton5(event)
{
$(".vitrina5").css("opacity","0");
$(".vitrina5").css("top","-2848px");
$(".vitrina5").animate({"opacity":1,"top":-2848},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton6(event)
{
$(".vitrina6").css("opacity","0");
$(".vitrina6").css("top","-3560px");
$(".vitrina6").animate({"opacity":1,"top":-3560},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton7(event)
{
$(".vitrina7").css("opacity","0");
$(".vitrina7").css("top","-4272px");
$(".vitrina7").animate({"opacity":1,"top":-4272},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton8(event)
{
$(".vitrina8").css("opacity","0");
$(".vitrina8").css("top","-4984px");
$(".vitrina8").animate({"opacity":1,"top":-4984},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton9(event)
{
$(".vitrina9").css("opacity","0");
$(".vitrina9").css("top","-5696px");
$(".vitrina9").animate({"opacity":1,"top":-5696},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton10(event)
{
$(".vitrina10").css("opacity","0");
$(".vitrina10").css("top","-6408px");
$(".vitrina10").animate({"opacity":1,"top":-6408},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton11(event)
{
$(".vitrina11").css("opacity","0");
$(".vitrina11").css("top","-7120px");
$(".vitrina11").animate({"opacity":1,"top":-7120},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton12(event)
{
$(".vitrina12").css("opacity","0");
$(".vitrina12").css("top","-7832px");
$(".vitrina12").animate({"opacity":1,"top":-7832},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
}
$('#btn1').bind('click', boton1);
$('#btn2').bind('click', boton2);
$('#btn3').bind('click', boton3);
$('#btn4').bind('click', boton4);
$('#btn5').bind('click', boton5);
$('#btn6').bind('click', boton6);
$('#btn7').bind('click', boton7);
$('#btn8').bind('click', boton8);
$('#btn9').bind('click', boton9);
$('#btn10').bind('click', boton10);
$('#btn11').bind('click', boton11);
$('#btn12').bind('click', boton12);
});
#contenedorPrimario { position:relative;margin-left:auto;margin-right:auto;width:100%;  background: url(../imagenes/fondo_index.jpg); width: 1100px; height: 800px;}
.clear {clear:both;}
#aparador {position:absolute; margin-top: 50px; margin-left: 456px; width:641px;overflow: hidden; height:712px; background:#666; margin-right: 20px; }
#mercancia {position:absolute; width: 641px; height: 9324px; margin-top: 0px; visibility: visible; background: #fff; }
.vitrina1, .vitrina2, .vitrina3, .vitrina4, .vitrina5, .vitrina6, .vitrina7, .vitrina8,      .vitrina9, .vitrina10, .vitrina11, .vitrina12 { position:relative; width:641px; height: 712px; }
.vitrina1 { /*background-color: #33CCCC;*/ background: #D2D2D2;}
.vitrina2 { background-color: #999900;}
.vitrina3 { background-color: #CC6600;}
.vitrina4 { background-color: #AA0000;}
.vitrina5 { background-color: #99CC33;}
.vitrina6 { background-color: #0066CC;}
.vitrina7 { background-color: #570699;}
.vitrina8 { background-color: #CC33CC;}
.vitrina9 { background-color: #02F965;}
.vitrina10 { background-color: #FFFF00;}
.vitrina11 { background-color: #C80461;}
.vitrina12 { background-color: #000066;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedorPrimario">
<div id="botones">
<div class="boton" id="btn1"><a class="tooltip" rel="Contenedor 1"><img src="imagenes/imagen1.jpg"></a></div>
<div class="boton" id="btn2"><a class="tooltip" rel="Cajón<br>Contenedor 2"><img src="imagenes/imagen2.jpg"></a></div>
<div class="boton" id="btn3"><a class="tooltip" rel="Este es el Contendor<br>#3 Cajón 3"><img src="imagenes/imagen3.jpg"></a></div>
<div class="boton" id="btn4"><a class="tooltip" rel="Ejemplo de contenido<br>dentro del cajón<br>Contenedor 4"><img src="imagenes/imagen4.jpg"></a></div>
<div class="boton" id="btn5"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen5.jpg"></a></div>
<div class="boton" id="btn6"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen6.jpg"></a></div>
<div class="boton" id="btn7"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen7.jpg"></a></div>
<div class="boton" id="btn8"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen8.jpg"></a></div>
<div class="boton" id="btn9"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen9.jpg"></a></div>
<div class="boton" id="btn10"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen10.jpg"></a></div>
<div class="boton" id="btn11"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen11.jpg"></a></div>
<div class="boton" id="btn12"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen12.jpg"></a></div>
</div>
<div id="sociales">Aqui van los iconos que controlan <a id="redes2" href="#">redes sociales</a> y el player</div>
<div id="aparador">
<div id="mercancia">
<div class="vitrina1"><img src="imagenes/principal_pic.jpg" width="652" height="568" alt=""><h2>Entra a la nueva era</h2></div>
<div class="vitrina2">Hola 2</div>
<div class="vitrina3">Hola 3</div>
<div class="vitrina4">Hola 4</div>
<div class="vitrina5">Hola 5</div>
<div class="vitrina6">Hola 6</div>
<div class="vitrina7">Hola 7</div>
<div class="vitrina8">Hola 8</div>
<div class="vitrina9">Hola 9</div>
<div class="vitrina10">Hola 10</div>
<div class="vitrina11">Hola 11</div>
<div class="vitrina12">Hola 12</div>
</div>
</div>
</div>

There, the thumbs or botons on the left must change the content on the right.

\$\endgroup\$

migrated from stackoverflow.com Apr 15 '12 at 19:06

This question came from our site for professional and enthusiast programmers.

1
\$\begingroup\$

It is very difficult to tell what you are trying to do from you code, but here is a very general example of a cleanup I would do on your code based on some assumptions.

http://jsfiddle.net/tgcNd/1

  1. Combine your css changes into a single statement as Jonathjan Sampson suggested.

    $(selector).css( { opacity: "0", top: "0" });
    
  2. Alon has another valid point which is method chaining. This increases performance by decreasing the number of jQuery object looksups.

    $(selector).css().css().animate(); //etc
    
  3. Use jQuerys on for your event binding. Assuming the buttons share a parent you can monitor that parent for button presses. This reduces the number of bound events and increases performance.

    $('#buttoncontainer').on('click', 'button', function() { ... });
    
  4. Use a class or a general function so that you are not repeating code over and over again. In this simplified example I change the clicked button's state and then make a change to all other buttons by making use of the not method.

    $(this).css( { opacity: "0", top: "0" });
    $('button').not(this).each(function() {
       console.log('animating button: ' + this.innerHTML);
       $(this).animate({
          //animate
       }, 1, "linear", null);
    });
    
\$\endgroup\$
  • \$\begingroup\$ Sorry, you’re right... I posted the rest of the code, my screen is split in two, on the left I have this 12 tiles, every time I click in one of theme, any of them, the content on the right changes, fade in fade out so on. \$\endgroup\$ – Sam Ram San Apr 15 '12 at 3:36
  • \$\begingroup\$ There are far better ways to do this (as you surmised). See this example. jsfiddle.net/dLGvg \$\endgroup\$ – mrtsherman Apr 15 '12 at 3:56
  • \$\begingroup\$ And this is the code working jsfiddle.net/tgcNd/4 \$\endgroup\$ – Sam Ram San Apr 15 '12 at 4:00
  • \$\begingroup\$ My God, that's it... it does the same but whiteout a thousand lines... Thank you, Thank you. This is great. I promise Ill learn from it. \$\endgroup\$ – Sam Ram San Apr 15 '12 at 4:13
  • \$\begingroup\$ one thing only, the content from the windows on the right are queried from a database... will this work as well? \$\endgroup\$ – Sam Ram San Apr 15 '12 at 4:28
1
\$\begingroup\$

EDIT: This is a new answer now that we see the HTML and understand what the OP is actually trying to do. There is a much, much simpler way to do this.

Conceptually, instead of maintaining manually controlled relative positions of every .vitrinaX div, we just make them all absolutely positioned on top of one another with only one div visible at a time. To show a new one, we fadeOut() the current one (which we maintain a reference to with an active class and fadeIn() the new one. Since they are all on top of one another, it makes a smooth opacity transition from one to the other.

Here's a working demo: http://jsfiddle.net/jfriend00/4UmQ5/

You can change ALL of your Javascript to this:

jQuery(function($) {
    $(".boton").click(function() {
        var id = this.id.replace("btn", "");
        $("#mercancia .active").removeClass("active").fadeOut();
        $(".vitrina" + id).fadeIn().addClass("active");
    });
});

And, change this part of your CSS from this:

.vitrina1, .vitrina2, .vitrina3, .vitrina4, 
.vitrina5, .vitrina6, .vitrina7, .vitrina8, 
.vitrina9, .vitrina10, .vitrina11, .vitrina12 { 
    position:relative; 
    width:641px; 
    height: 712px; 
 }
.vitrina1 { /*background-color: #33CCCC;*/ background: #D2D2D2;}

to this:

.vitrina1, .vitrina2, .vitrina3, .vitrina4, 
.vitrina5, .vitrina6, .vitrina7, .vitrina8, 
.vitrina9, .vitrina10, .vitrina11, .vitrina12 { 
    position:absolute; 
    width:641px; 
    height: 712px; 
    display: none;
}
.vitrina1 { 
    /*background-color: #33CCCC;*/ background: #D2D2D2; 
    display: block;
}

And, then in your HTML, add the "active" class to this line:

<div class="vitrina1 active">Hola-Hello this his window #1</div>

Here's the original answer before the actual HTML and actual rendering intent was disclosed

It would be useful to both see the HTML and understand what you're really trying to do here. It may be much easier to add some appropriate classes and do things a simpler way, but we can't really tell without seeing the whole problem including the HTML and a description of what you're really trying to accomplish.

From purely studying your code, it can be deduced to a pattern and that pattern can be generated with javascript rather than repeatedly typed out. Here's my first analysis of deducing the pattern to a couple loops of code. There's one loop to create each event handler and another loop inside each event handler to loop through each item and apply the desired change to each one:

jQuery(function ($) {
    for (var i = 1; i <= 12; i++) {
        (function(i) {
            $("#btn" + i).click(function (event) {
                $(".vitrina" + i).css({opacity: 0, top: 0});
                for (var j = 1; j <= 12; j++) {
                    var topVal = j - 1;
                    if (j == i) {
                        topVal = -topVal;
                    }
                    $(".vitrina" + j).animate({top: topVal * 712}, 1, "linear");
                }
            });
        })(i);
    }
}); 
\$\endgroup\$
  • \$\begingroup\$ OK, thanks’ for such a fast response every one, and yes mrtsherman you’re right, here is the rest of the code ;) \$\endgroup\$ – Sam Ram San Apr 15 '12 at 3:14
  • \$\begingroup\$ Here you can see it in action.. jsfiddle.net/tgcNd/4 \$\endgroup\$ – Sam Ram San Apr 15 '12 at 3:59
  • \$\begingroup\$ @SamRamSan - can you describe what visual effect are you trying to achieve? All, I see is one div to the right moving into the visible position when you click on a square and I see no animation. That effect can be achieved very, very simply with 1/100th the complication you have now. Unless, there's supposed to be more to the switch than I currently see. Please explain what you are trying to achieve. \$\endgroup\$ – jfriend00 Apr 15 '12 at 5:59
  • \$\begingroup\$ OK, I have as you can see, 12 tiles the left, those tiles are to be generated from a MySqk database, and will show a thumbnail.. when clicking on the thumb, the content on the right div will be populated from data coming from mysql as well. Its working ok but. The code for the whole thing is just too big, and repetitive. Now the info from the right will have or does have a slight fade out and fade in every time on or other tile is clicked. It’s already working, but it’s just very repetitive. Thanks \$\endgroup\$ – Sam Ram San Apr 15 '12 at 7:51
  • \$\begingroup\$ @SamRamSan - I've proposed a radically simpler idea that replaces all your code with 7 lines of code and needs a couple corresponding changes in HTML/CSS. \$\endgroup\$ – jfriend00 Apr 15 '12 at 16:41
0
\$\begingroup\$

I've no way to try this out, but with your actual code, without changin classes etc, this seems like the obvious way to do it, but maybe not the best...

var max = 12;
var animVitrina = function (btn) {
    var _ival = 712,
         _top =  - ((btn - 1) * _ival);
    $('.vitrina' + btn).css({
        opacity : 0,
        top : _top
    }, 300).animate({
        opacity : 1,
        top : _top
    });
    _top = 0;
    for (var i = 1; i < max; i++, _top += _ival) {
        if (i !== btn) {
            $('.vitrina' + i).animate({
                top : _top
            });
        }
    }
};
for (var i = 1; i < max; i++) {
    $('#btn' + i).on('click', animVitrina(i));
}
\$\endgroup\$
  • \$\begingroup\$ here you can see it at work jsfiddle.net/tgcNd/4 \$\endgroup\$ – Sam Ram San Apr 15 '12 at 4:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.