无法使用淡出功能多次工作

Question

So this is the code that I have written. i have very little knowledge of jquery and just tried to write what I saw. I am sure their is an easier I run it once and it will work but after that it just stays the some for each click and does not call the function back up for the next click. I am having the same problem on another script that I have, I can't seem to call a function more than one time. One and done it what it seems to do. Any help would be much appreciated.

$.noConflict();
jQuery(document).ready(function ($) {
    $("#scrollmenu");

    $("#e_emd").click(function () {
        $("#e_em").show();
        $("#e_v").delay(1200).fadeOut("slow");
        $("#e_s").delay(1200).fadeOut("slow");
        $("#e_l").delay(1200).fadeOut("slow");
    });

    $("#e_vd").click(function () {
        $("#e_em").delay(1200).fadeOut("slow");
        $("#e_v").show();
        $("#e_s").delay(1200).fadeOut("slow");
        $("#e_l").delay(1200).fadeOut("slow");
    });

    $("#e_sd").click(function () {
        $("#e_em").delay(1200).fadeOut("slow");
        $("#e_v").delay(1200).fadeOut("slow");
        $("#e_s").show();
        $("#e_l").delay(1200).fadeOut("slow");
    });

    $("#e_ld").click(function () {
        $("#e_em").delay(1200).fadeOut("slow");
        $("#e_v").delay(1200).fadeOut("slow");
        $("#e_s").delay(1200).fadeOut("slow");
        $("#e_l").show();
    });
});

<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT -->
<div id="scrollmenu">| 
    <a id="e_emd" href="#Event_Management" class="panel">Event Management</a> | 
    <a id="e_vd" href="#Video" class="panel">Video</a> | 
    <a id="e_sd" href="#Sound" class="panel"></a>Sound | 
    <a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> | 
</div>

<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />

I have upoloaded the full page I am working on.

The site I am trying it on is here http://www.mac-av.com/test2/

What I am seeing is that I can't use an id more than once to call a function where i have

<div id="scrollmenu">| 
    <a id="e_emd" href="#Event_Management" class="panel">Event Management</a> | 
    <a id="e_vd" href="#Video" class="panel">Video</a> | 
    <a id="e_sd" href="#Sound" class="panel"></a>Sound | 
    <a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> | 
</div>

Multiple times on the same page

I am needing each image to change differently for every button that is clicked for ever category because of the scrolling that I have. I am doing this because when the page it on a computer with a low resolution the image will appear on the left side under the content window of the next category. So making this script was suppose to hide the images from it and only show the ones that are there for the category it is on, but also be able to see the other as it scrolls before they disappear.

It will work for the first set of buttons, but not afterwards. I am realizing that I can only call them once with the id, but instead of making a different script for each one, is there an easier way?

Answer 1

Why are you using the $.noConflict(); ? Try removing that. Also try removing the $ from your ready function and using it instead of "jQuery", so it looks as follows:

$(document).ready(function () {
 // blah blah
});

And yes, document.ready fires when it's loaded, but you are linking your ids to events, so they should be fine. Do you have any 3rd party controls or other ajax controls on this page?

Answer 2

Could you put up a link to the page? If you could do this, I could debug it quickly. fadeOut will work more than once, so there must be something up with your on-page script and selectors.

Tips that might help in the meantime:

• Be more verbose in your id names, it will help when looking back at your code or when other people look at it
• Space things our properly when they are nested
• You have a random $("#scrollmenu"); declaration at the top that isn't doing anything... you can get rid of that
• You can make your code more DRY by making this into one function - pass it an array of all the selectors and the one you want to leave out, then on click loop through that array and if it matches the one you want to leave out, show it, if not, hide it. If you don't get what I mean here I can write an example.

Answer 3

A few things:

• id s can only be used once per page
• use CSS selectors and good markup to reduce the amount of code
• use CSS to style your elements

jQuery can read element attributes, so take advantage of it.

<script type="text/javascript">
$(document).ready(function(){
  // when any link inside scrollmenu is clicked
  $(".scrollmenu a").click(function (e) {
    // don't follow the link
    e.preventDefault();
    // find out which image to show
    var target_id = $(this).attr('href');
    // fadeOut all visible images inside .images that isn't the one we'll show
    $('.images img').is(':visible').not(target_id).fadeOut("slow");
    // show the target
    $(target_id).show();
  });
});
</script>

<div class="scrollmenu">| 
  <a href="#e_em">Event Management</a> | 
  <a href="#e_v">Video</a> | 
  <a href="#e_s"></a>Sound | 
  <a href="#e_l">Lighting &amp; Staging</a> | 
</div>

<div class="images">
  <img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
  <img id="e_v" src="images/video.png" width="1128" height="480" />
  <img id="e_s" src="images/sound.png" width="1011" height="480" />
  <img id="e_l" src="images/light.png" width="1011" height="480" />
</div>

You could combine this with @JonH's method for more complicated sequences of animations.

Answer 4

I set up an example for you to further elaborate on my comment. http://jsfiddle.net/jMQhZ/11/

Clicking the first box will fire the #e_emd click event. If you click that again, nothing will happen because the function has nothing to do. If you click show all you'll see that all the divs are set back to normal. Now clicking the #e_emd div will run your function again.