Simpliflying jQuery calls that use redundant data

Question

I have a bit of code that controls some divs but its repeats a lot just for one little change on a different link

If I click #Option1 then 2-5 shrink to 0 (if any of them are open) and go to 0 opacity and vice versa if you click 2 (collapsing 1 and the rest) but i cant think of a good way to make it more generic but there has to be a way

$('#Option1').click(function() {
      var ele = $('#Option1Div');
      ele.animate({
               opacity    : .75,
               width      : '602px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option2Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option3Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option4Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option5Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
});

score 0 · Answer 1 · answered Oct 04 '12 at 03:13

0

If you give your options a class of options and your divs a class of option-divs, you can use something like this:

$('.options').click(function() {
    var element = $('.option-divs').eq($(this).index());

    element.stop().animate({
        opacity: .75,
        width: '602px'
    }, 5000).siblings().stop().animate({
        opacity: 0.1,
        width: '0px'
    }, 5000);
});

answered Oct 04 '12 at 03:13

Blender

289,723
53
439
496

all great ideas, but the first seems simplist but take a look maybe it can be made more efficient http://tokusatsu.lurkerlordx.com/prototype.html – NekoLLX Oct 04 '12 at 15:35
@NekoLLX: The approach that you're using isn't very good. `id`s shouldn't be used like this. – Blender Oct 04 '12 at 17:39
Can you explain why? I mean nothing is redundent they are only used onced so isn't ID preferable to Classes, Especially when later on things like the content divs will have different content – NekoLLX Oct 05 '12 at 16:34
I mean, if it works, there's nothing really wrong with it, but generic solutions allow you to add/remove HTML elements without having to rewrite the JavaScript. – Blender Oct 05 '12 at 18:53
Well that's certinly more effecient and i love efficient, maybe i'll give it a try, my only real consern is when i srat dynamilly changingthe content in specific areas liek the OptionDivs, Subsection1, and the Header – NekoLLX Oct 05 '12 at 23:24
Just tried your class/sibmings code and clicking on any spine image causes all divs, the other spines, and the sub headings to collapse into nothing. All i want to colapse is the Option-divs that aren't the one for the active spine. (I also am trying to get the sub heading 2 links to change to red to read when a dive is activated, or to triger the activation if you click on them, vice the page source to see my current build) – NekoLLX Oct 06 '12 at 01:44
Without seeing your HTML, there's nothing that I can do. – Blender Oct 06 '12 at 01:49

Sushanth -- · Accepted Answer · 2012-10-04T03:47:55.140

0

You can try this

  $('#Option1 , #Option2 ,#Option3 , #Option4 , #Option5').click(function() {
    var ele = $('#' + this.id + 'Div');
    ele.animate({
        opacity: .75,
        width: '602px'
    }, 5000, function() {
        // Animation complete.
    });

    $('[id^="Option"][id$="Div"]').not(ele).animate({
        opacity: 0.1,
        width: '0px'
    }, 5000, function() {
        // Animation complete.
    });
});

edited Oct 04 '12 at 03:47

answered Oct 04 '12 at 03:13

Sushanth --

55,259
9
66
105

that is elegant but can i go cleaner? since clicking on say Option 2 sets Option2Div opacity to .75 and width to 602 while reducing 1 (and 3-5) to 0 – NekoLLX Oct 04 '12 at 03:24
Try the code pasted above.. It handles all the click events for the 5 Options div – Sushanth -- Oct 04 '12 at 03:48
that's perfect. very efficient! Thanks – NekoLLX Oct 04 '12 at 04:48

score 0 · Answer 3 · answered Oct 04 '12 at 04:05

Technically, as you have different values for opacity, width, and eventually duration of animation, you cannot do a job purely generic.

But you could isolate all changing data in array and apply a generic code like:

    var opacities = [0.75, 0.1, 0.1, 0.1, 0.1];
    var widths = [602, 0, 0, 0, 0];
    var durations = [500, 500, 500, 500, 500];
    var callbacksComplete = [cb1, cb2, cb3, cb4, cb5];

    $('#Option1').click(function() {

        // Assume that 3 arrays have the same size !
        for(var i = 0 ; i < opacities.length ; i++)
        {
            $('#Option' + i + 'Div').animate({
                'opacity' : opacities[i],
                'width' : widths[i]
            }, durations[i], callbacksComplete[i]);
        }
    }

I don't need it totally generic...just more efficent then 5 calls of 5 functions The Arry looks good too — NekoLLX, Oct 04 '12 at 04:49

Simpliflying jQuery calls that use redundant data

3 Answers3