Jquery之后悬停效果不起作用

Question

I am currently making a website for an architecture firm, HLArchitects. In the projects page I have created an HTML / Javascript image gallery. When you hover over a smaller thumbnail the opacity changes from 0.5 to 1. It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/

My problem is that after you click on one of the smaller thumbnails, which changes the bigger picture above it, and then try to hover over another smaller thumbnail, it no longer changes opacity. I used a simple CSS :hover to change the opacity along with transition: opacity 0.2s . Here is the Javascript / Jquery for the on click event of he thumbnail:

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>

I would really appreciate a solution to this so that the hover effect works even after you click on one of the thumbnails.
Thank you in advance

Answer 1

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

Also, your site has two opening body tags and strange invalid markup.

Answer 2

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);
        });
    }
});

Take a good look at your HTML elements and fix unclosed tags, duplicate tags, duplicate ID elements etc... , and on other JS errors that pop out in console in your page. Otherwise you'll be running in loops ;)

Answer 3

Initially when I run this in the console I get this error:

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

It seems that your script is looking for something in the DOM that hasn't loaded yet.

Currently proj.js is looking for elements that haven't loaded yet.

Your script should run at the bottom of your page like the imageFlow.js.