Проблема с изменением fadeTo () на fadeIn () в инструментах jQuery - PullRequest
Новая
       14

Проблема с изменением fadeTo () на fadeIn () в инструментах jQuery

0 голосов
/ 22 ноября 2011

Я использую jQuery Tools Scrollable с этой настройкой .У меня возникают проблемы при изменении эффекта перехода на большом изображении.

Когда вы щелкаете по миниатюре, большое изображение постепенно исчезает (вы можете увидеть это поведение в демоверсии, посетивссылка ).Только для большого изображения, которое нужно затемнить.

Я предполагал, что это так же просто, как изменить переход с var wrap = ... fadeTo() на fadeIn(), но это не так.Я также изменил переход в строке wrap.fadeTo(), и это не сработало.

Есть идеи, почему?Я удалил ненужный код из моего примера ... 

$(function() {
    $(".scrollable").scrollable();

    $(".items img").click(function() {
        if ($(this).hasClass("active")) { return; }

        var url = $(this).attr("src").replace("_t", "");
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);
        var img = new Image();

        img.onload = function() {
            wrap.fadeTo("fast", 1);
            wrap.find("img").attr("src", url);
        };

        img.src = url;
        $(".items img").removeClass("active");
        $(this).addClass("active");
    }).filter(":first").click();
});

HTML 

<div id="image_wrap">Large image goes here</div>
<div class="scrollable">
    <div class="items">
        <div>
            thumbnails go here
        </div>
    </div>
</div>

1 Ответ

1 голос
/ 22 ноября 2011

Что такое img? И вы не можете добавить функцию .load() к чему-то, что уже загружено, также, если вы добавите несколько функций .load() к 1 элементу, и он будет загружен, все функции .load(), которые вы связали ранее, также будут вызваны .

И, может быть, вы не захотите делать .stop(true, false) перед вызовом методов .fadeTo(), потому что, если у вас уже затухание, оно останавливает его, очищает очередь и уходит в новую позицию. Так что вам не нужно ждать, пока он частично загрузится.

Обновление

Если вы не хотите затухания, а только затухания, используйте это: 

$(function() {
    $(".scrollable").scrollable();

    $(".items img").click(function() {
        if ($(this).hasClass("active")) { return; }

        var url = $(this).attr("src").replace("_t", "");
        var wrap = $("#image_wrap"); // This line edited
        var img = new Image();

        img.onload = function() {
            wrap.css("opacity", 0.5).fadeIn(); // This line edited
            wrap.find("img").attr("src", url);
        };

        img.src = url;
        $(".items img").removeClass("active");
        $(this).addClass("active");
    }).filter(":first").click();
});
...