Как выделить активный эскиз?

Question

Мне было интересно, как я мог бы выделить активный эскиз на этой странице http://www.doublezerofilms.com/doublezero-template-webSamples.html, поэтому, когда он щелкает, он остается при наведении мыши на img, пока не будет нажата другая миниатюра?

это код, который я 'm, чтобы выбрать видео и ниже, что HTML спасибо!

$(document).ready(function () {
    $("#Thumb1").click(function () {
        $("#hidden").hide().html('<iframe src="http://player.vimeo.com/video/38366163?autoplay=1"  width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>').fadeIn(4e3);
        $("#leftsidePlayer").text("This is some text on the consulting video!")
    });

<div class="thumbsWrap">
                        <div>
                            <div id="Thumb1" class="fadehover">
                            <img src="images/thumb1.jpg" alt="" class="a" />
                            <img src="images/thumb1-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb2" class="fadehover">
                            <img src="images/thumb2.jpg" alt="" class="a" />
                            <img src="images/thumb2-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb3" class="fadehover">
                            <img src="images/thumb3.jpg" alt="" class="a" />
                            <img src="images/thumb3-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb4" class="fadehover" style="margin:0px">
                            <img src="images/thumb4.jpg" alt="" class="a" />
                            <img src="images/thumb4-over.jpg" alt="" class="b" />
                            </div>
                        </div>
                    </div>

код наведения

$(document).ready(function () {
    $("img.a").hover(function () {
        $(this).stop().animate({
            opacity: "0"
        }, "fast")
    }, function () {
        $(this).stop().animate({
            opacity: "1"
        }, "fast")
    })
});

Answer 1

Как я вижу, вы меняете непрозрачность, чтобы выделить миниатюры (при наведении курсора). Так вот что-то вроде того, что вы хотите: http://jsfiddle.net/fnfJH/ Когда вы щелкаете по div, он изменяет непрозрачность div, которая уже составляет от 1 до 0.5, и изменяет новый щелчок на 1.

Answer 2

Вам нужно создать CSS, чтобы скрыть ваше изображение, например, класс a:

img.transparent {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

Теперь Добавить событие нажатия на кнопку

$("img.a").click(function () {
 $(this).addClass('transparent');
});

Теперь отредактируйте указатель мыши, чтобы он не влиял на активное изображение

$("img.a").hover(function () {
if(!($(this).hasClass('transparent'))) {
        $(this).stop().animate({
            opacity: "0"
        }, "fast");
}
    }, function () {
if(!($(this).hasClass('transparent'))) {
        $(this).stop().animate({
            opacity: "1"
        }, "fast")
}
    })

Answer 3

Вы никогда не публиковали свой код, который касается их постепенного исчезновения, но это в основном то, что вы будете делать.

//when a div is clicked add an active class to it
$('.thumbsWrap').on('click', '.fadehover', function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
});

//in hover event check if parent has the 'active class'. If so then don't fade it out.
$("img.a").hover(function () {
    $(this).stop().animate({
        opacity: "0"
    }, "fast")
}, function () {
    if ( !$(this).parent().hasClass('active') ) {
       $(this).stop().animate({
           opacity: "1"
       }, "fast")
    }
})