不能让淡出功能多次工作

Can't get fade out function to work more than once

本文关键字：工作 功能 淡出 不能      更新时间：2023-09-26

这就是我写的代码。我对jquery知之甚少，只是试着写我看到的东西。我相信他们是一个更容易的我运行它一次，它会工作，但之后，它只是保持一些每次点击，不调用函数备份为下一次点击。我有同样的问题在另一个脚本，我有，我似乎不能调用一个函数不止一次。一个，做了它看起来应该做的事。如有任何帮助，不胜感激。

$.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" />

我已经上传了我正在制作的整个页面。

我尝试的网站在这里http://www.mac-av.com/test2/

我看到的是，我不能使用id多次调用一个函数，我有

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

多次出现在同一页

我需要每个图像改变不同的每一个按钮是点击每一个类别，因为我有滚动。我之所以这样做，是因为当在计算机上使用低分辨率的页面时，图像将出现在左侧的下一个类别的内容窗口下。所以制作这个脚本应该隐藏图像，只显示那些在那里的类别它是上，但也能够看到其他的，因为它滚动之前，他们消失。

它将对第一组按钮起作用，但之后不起作用。我意识到我只能用id调用它们一次，而不是为每个人制作不同的脚本，是否有更简单的方法?

你能放一个链接到这个页面吗?如果你能做到这一点，我就能很快地调试它。fadeOut将工作不止一次，所以你的页上脚本和选择器一定有什么问题。

在此期间可能有帮助的提示:

  • 在你的id名中更详细，这将有助于当你回头看你的代码或当其他人看它
  • 空间事物在嵌套时是正确的
  • 你有一个随机的$("#scrollmenu");声明在顶部，不做任何事情…你可以去掉
  • 你可以让你的代码更DRY通过把它变成一个函数-传递它的所有选择器的数组和你想要留下的一个，然后点击循环通过该数组，如果它匹配你想要留下的，显示它，如果不，隐藏它。如果你不明白我的意思，我可以写一个例子。

几点:

  • id s每页只能使用一次
  • 使用CSS选择器和良好的标记来减少代码量
  • 使用CSS样式化你的元素

jQuery可以读取元素属性，所以好好利用它。

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

您可以将此方法与@JonH的方法结合使用，以实现更复杂的动画序列。

我举了一个例子，让你进一步阐述我的评论。http://jsfiddle.net/jMQhZ/11/

单击第一个框将触发#e_emd单击事件。如果你再次点击它，什么也不会发生，因为函数没有任何事情要做。如果您单击show all，您将看到所有divs都被设置为正常。现在单击#e_emddiv将再次运行您的函数。

为什么要使用$.noConflict();？ 试着把它去掉。还可以尝试从ready函数中删除$，并使用它代替"jQuery"，因此它看起来如下:

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

是的，文档。Ready在加载时触发，但您将id链接到事件，因此它们应该没问题。你在这个页面上有任何第三方控件或其他ajax控件吗?

相关文章：