JQuery анимация непрозрачности на миниатюрах, за исключением выбранного - PullRequest
Новая
       18

JQuery анимация непрозрачности на миниатюрах, за исключением выбранного

2 голосов
/ 24 февраля 2011

У меня есть набор миниатюр, которые я хочу уменьшить до 40%, когда выбран другой эскиз.Исходный эскиз останется с непрозрачностью 100%.Мне нужно иметь общий выпуск для исчезнувших миниатюр, чтобы щелчок в любом месте страницы вернул другие большие пальцы к 100% непрозрачности.

Вот демонстрационная версия: http://www.dumstr.com/sofeb11/stash/

Js: 

$(function() {           
    $("div#fadeout .stashthumb").click(function () {             
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
    },          
    function () {      
            $("div#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);       
    });

HTML 

<div id="fadeout" class="stasher">

     <div style="opacity: 1;" class="stashthumb">
     <span><a href="#"><img src="img/stash-01.jpg"></a></span>
     </div>
</div>

Спасибо!

Ответы [ 4 ]

6 голосов
/ 24 февраля 2011

Измените свой javascript на этот (я думаю, что вы хотите именно такое поведение, ваш вопрос мне не понятен на 100%): 

$(function() {           
    $("div#fadeout .stashthumb").click(function (event) {             
        $(this).siblings().stop().animate({opacity: 0.4}, 300);       
        $(this).stop().animate({opacity: 1.0}, 300); 
        event.stopPropagation();     // don't fire the body click handler
    });

    // here's the "anywhere on the page" part you wanted
    $("body").click(function() {
        $("#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);
    });   
});
2 голосов
/ 24 февраля 2011

Опираясь на ответ Digitlworld 

$("div#fadeout .stashthumb").click(function (e) {
    e.stopPropagation(); // This will stop the click bubbling up to the body
    $(this).removeClass('thumb40').addClass('thumb100');
    $('.stashthumb').not(this).removeClass('thumb100').addClass('thumb40');
});

$(body).click(function() {
    $('.stashthumb').removeClass('thumb40').addClass('thumb100');
});
0 голосов
/ 24 февраля 2011

Измените ваш jQuery следующим образом: 

    $("div#fadeout .stashthumb").click(function (e) {
    $(".stashthumb").animate({opacity: 1},300);    
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
            e.stopPropagation();
    });
$("body #fadeout:not(.stashthumb)").click(function () {
    $(".stashthumb").animate({opacity: 1},300);
});

Вот рабочий пример jsFiddle

0 голосов
/ 24 февраля 2011

Я бы использовал класс CSS, назначенный миниатюрам для непрозрачности 40%, другой для непрозрачности 100%.

Когда я хочу вернуть их всех обратно, я бы использовал jQuery $(".thumb40") или что-то в этом роде, чтобы выбрать поблекшие и установить для их класса CSS значение .thumb100, используя функцию jQuery для перехода между классами. jQuery toggleClass

Чтобы скрыть все, кроме текущего, используйте аналогичный jQuery, .thumb100, но поставьте контрольный код, чтобы убедиться, что тот, который вы меняете на .thumb40, не тот, который вы выбираете.

Что касается щелчка мышью, мне самому это интересно.

...