jquery onclick淡入淡出效果

我剛剛開始學習jquery，很少有JS知識（長話短說 - 我被告知它有助於提供快捷方式 - 如果我有時間，我會正確地學習JS）。jquery onclick淡入淡出效果

因此，我試圖從根本上創建一個滾動字幕或多幀英雄橫幅，無論您想要如何調用它。我不想要任何自動化，我正在專門尋找最終用戶單擊按鈕/圖像來更改選取框圖像。

我有我的jquery的問題，因爲我想要求幫助另一件我正在努力，這是隱藏當前顯示的圖像。

我目前的jquery有什麼問題，它不能正常工作？
a。文件加載在頁面頂部
b。當我執行這個（$（「＃imgd2」）。fadeIn;）部分的jquery它在螢火蟲工作，但在點擊功能，它不...
我怎麼能去看看什麼圖像當前正在顯示，隱藏並淡入適當的圖像。例如，img1默認顯示，如果我點擊img3，如何隱藏圖像1在選取框3中淡出之前？

// HTML - 原諒懶惰
//我顯示默認的第一圖像和網頁上隱藏其他兩個圖像。

<div style="width: 100%; height: 450px;" id="img-container"> 

<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div> 
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div> 
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div> 

<div style="position: absolute; top: 438px; left: 322px;" id="bttns"> 
<img id="img1" src="active.png"> 
<img id="img2" src="active.png"> 
<img id="img3" src="active.png"> 
</div> 

</div>

// jQuery的
//上的特定按鈕的點擊，我想淡入適當的圖像

$("#img1").click(function() { 
$("#imgd1").fadeIn; 
}); 

$("#img2").click(function() { 
$("#imgd2").fadeIn; 
}); 

$("#img3").click(function() { 
$("#imgd3").fadeIn; 
});

在此先感謝！

來源

2013-12-10 user2828701

獲得可以工作的財產。所以這將是未執行的'jQuery.fadeIn'函數。要執行一個函數，你需要括號。當然，如果你做了'var fi = $（'＃img1'）。淡入; fi（）;'上下文會改變，造成問題，但這將是你稍後會學到的東西。 – PHPglue

fadeIn是一個功能，你需要自行調用它

$("#imgd3").fadeIn();

寫每個imgd元素的點擊處理程序，您可以針對所有的人（通過添加類imgd）和使用data-*屬性來指定要顯示的圖像（data-target屬性和圖像的ID）。還可以在所有圖像中添加img類，以便我們可以很容易地隱藏它。

<div style="width: 100%; height: 450px;" id="img-container"> 
    <div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div> 
    <div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div> 
    <div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div> 
    <div style="position: absolute; top: 438px; left: 322px;" id="bttns"> 
     <img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" /> 
     <img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" /> 
     <img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" /> 
    </div> 
</div>

然後

jQuery(function ($) { 
    var $imgds = $('.imgd'); 
    $('.img').click(function() { 
     var $target = $($(this).data('target')); 
     $imgds.not($target).hide(); 
     $target.stop(true, true).fadeIn(); 
    }) 
});

演示：Fiddle

來源

2013-12-10 00:42:57

thx試圖幫助！有些東西在這裏工作不正常。我注意到了html中數據目標的拼寫錯誤，但那並不奏效。這裏有什麼想法？這就像我的圖像不可點擊，使JS工作... – user2828701

@ user2828701對不起，我'imgd'元素可點擊而不是'img'元素，請參閱更新和演示 –

@scrowler對不起，這是重複的ID –

:-)

$("#imgd5").fadeIn();

對於問題2..heres我撥弄它必須有一個括號http://jsfiddle.net/5PP4z/2/

來源

2013-12-10 00:45:03 Hellgorithm

它只是問題的一部分... –

@Bonakid thx的幫助。我曾在螢火蟲工作過，但不知何故，它被排除在我的職位之外。對第二個問題有什麼想法？ – user2828701

我更新了我的答案，希望它有幫助。附：我使用按鈕導致我的互聯網連接是sloooowww ... – Hellgorithm

jquery onclick淡入淡出效果

回答

相關問題