懸停效果不工作後，jquery

我目前正在建立一個建築公司，HLArchitects網站。在項目頁面中，我創建了一個HTML/Javascript圖片庫。當你將鼠標懸停在一個更小的縮略圖，從0.5到1 不透明度的變化可以看這裏供參考：http://www.hla.co.za/projects/Hyuandai_Training_Centre/懸停效果不工作後，jquery

我的問題是，經過你點擊縮略圖較小的一個，從而改變上述大局觀它，然後嘗試將鼠標懸停在另一個較小的縮略圖上，它不再改變不透明度。我用一個簡單的CSS :hover來改變不透明度以及transition: opacity 0.2s。下面是使用Javascript/jQuery的爲上點擊事件的他縮略圖：

var imageFlow = document.getElementById("imageFlow"); 
var img = imageFlow.getElementsByTagName("img"); 

$("#imageFlow img").click(function(){ 
    var src = $(this).attr("src"); 
    if (src != $('#displayImg img').attr("src")){ 
     $('#displayImg img').fadeOut(200); 
     setTimeout(function(){$("#displayImg img").attr("src",src);}, 200); 
     $('#displayImg img').fadeIn(200); 
    } 

    for (var i = 0; i < img.length; i++) { 
     $(img[i]).css("opacity","0.5");   
    } 
    $(this).css("opacity","1"); 

})

HTML：

<div id="displayImg"> 
     <img src="images/095.jpg"> 
    </div> 

    <div id="imageFlow"> 
     <img src="images/095.jpg" alt="095" width="" height="" /> 
     <img src="images/105.jpg" alt="105" width="" height="" /> 
     <img src="images/106.jpg" alt="106" width="" height="" /> 
     <img src="images/110.jpg" alt="110" width="" height="" /> 
     <img src="images/133.jpg" alt="133" width="" height="" /> 
     <img src="images/137.jpg" alt="137" width="" height="" /> 
     <img src="images/138.jpg" alt="138" width="" height="" /> 
     <img src="images/141.jpg" alt="141" width="" height="" /> 
     <img src="images/145.jpg" alt="145" width="" height="" /> 
     <img src="images/149.jpg" alt="149" width="" height="" /> 
     <img src="images/160.jpg" alt="160" width="" height="" /> 
     <img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" /> 
     <img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" /> 
     <img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" /> 
     <img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" /> 
     <img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" /> 
     <img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" /> 
     <img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" /> 
     <img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" /> 
    </div>

我真的很感激了一個解決這個讓你點擊後連懸停效果的工作原理其中一個縮略圖。
預先感謝您

來源

2014-04-09 YSK .CO

半角冒號在點擊函數結束時丟失 – Abhinav

當您使用javascript設置樣式時，它們是內聯的並覆蓋樣式表。相反，添加和刪除一個類，問題將自行解決。雖然！ – adeneo

@ user2401175！但這不是問題在這裏:) –

var images = $("#imageFlow img"); 

images.on('click', function(){ 
    var src = $(this).attr("src"); 

    if (src != $('#displayImg img').attr("src")){ 
     $('#displayImg img').fadeOut(200, function() { 
      $(this).attr("src", src).fadeIn(200); 
     }); 
    } 

    images.removeAttr('style'); 
    this.style.opacity = '1'; 
});

FIDDLE

此外，您的網站有兩個口主體標籤和奇怪無效的標記。

來源

2014-04-09 17:31:46 adeneo

真的很感謝你的幫助。原因是我已經使用了一個php include（），我還沒有正確格式化 –

CSS：

#imageFlow img:hover, 
#imageFlow img.active { 
    opacity: 1; 
}

JS：

var $img = $("#imageFlow").find("img"); 

$img.click(function(){ 
    var src = this.src; 
    if (src != $('#displayImg img')[0].src){ 
     $(this).addClass('active').siblings('img').removeClass('active'); 
     $('#displayImg img').stop().fadeTo(200,0, function(){ 
      this.src = src; 
      $(this).fadeTo(200, 1); 
     }); 
    } 
});

看看你的HTML元素良好的外觀和修復未關閉的標籤，標籤的重複，重複的ID元素等。以及在頁面中的控制檯中彈出的其他JS錯誤。否則，你會在循環運行;）

來源

2014-04-09 17:28:54

最初，當我在控制檯運行此我得到這個錯誤：

TypeError: projs is null 
var img = projs.getElementsByTagName('img');

看來你的腳本正在尋找在尚未加載DOM的東西。

當前proj.js正在查找尚未加載的元素。

您的腳本應該像imageFlow.js一樣運行在頁面底部。

來源

2014-04-09 17:55:09 squashriddle

懸停效果不工作後，jquery

回答

相關問題