無法使淡出功能不止一次工作

所以這是我寫的代碼。我對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來打電話給他們，而不是爲每個人編寫不同的腳本，有沒有更簡單的方法？

來源

2011-09-14 Michael Claypool

我沒有看到任何地方你正在重置淡入淡出，所以下次單擊它時，該函數實際上沒有任何事情要做。 – Jack

爲什麼使用$ .noConflict（）; ？嘗試刪除。也可以嘗試從您準備功能刪除的$，並使用它來代替「jQuery的」，所以它看起來如下：

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

是的，火災的document.ready當它的加載，但你正在鏈接你的IDS事件，所以他們應該沒問題。您在此頁面上是否有任何第三方控件或其他Ajax控件？

來源

2011-09-14 15:58:10

你可以把鏈接指向頁面嗎？如果你能做到這一點，我可以快速調試它。 fadeOut將會不止一次地工作，所以你的頁面腳本和選擇器必須有一些東西。

提示，可能有助於在此期間：

在你的ID名稱更詳細的，它會回頭看你的代碼時，或幫助時別人看它
空間的東西我們當它們嵌套時正確
你有一個隨機的$("#scrollmenu");頂部的聲明是沒有做任何事情...你可以擺脫
你可以讓你的代碼更加幹nction - 將所有選擇器和想要忽略的選擇器數組傳遞給它，然後單擊通過該數組的循環，如果它與您想要忽略的那個匹配，則顯示它，如果沒有，則隱藏它。如果你在這裏沒有得到我的意思，我可以寫一個例子。

來源

2011-09-14 15:59:32

http://www.mac-av.com/test2/ –

$（「＃scrollmenu」）;是沒有衝突使用的腳本與我運行的所有其他jquery一起運行。 –

有幾件事情：

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的方法相結合，以獲得更復雜的動畫序列。

來源

2011-09-14 16:09:43 jimworm

我爲你做了一個例子來進一步闡述我的評論。 http://jsfiddle.net/jMQhZ/11/

點擊第一個框會觸發#e_emd點擊事件。如果再次單擊它，則不會發生任何事情，因爲該功能無關。如果您點擊顯示全部，您會看到所有divs已恢復正常。現在點擊#e_emd div將再次運行你的功能。

來源

2011-09-14 16:13:50 Jack

無法使淡出功能不止一次工作

回答

相關問題