Нажмите «Событие» с помощью fadeToggle() — что не так с моим кодом?

Я создал интерактивную карту Лондона, используя тег <map>, в котором определены 15 тегов <area>. При нажатии на любую из 15 областей источник карты заменяется другим, в соответствии с областью, по которой был сделан щелчок. Все области имеют индивидуальный идентификатор, и источник меняется в соответствии с этим идентификатором.

Повторный щелчок по области возвращает изображение карты к исходному источнику.

Упрощенный HTML для этого выглядит примерно так:

<IMG id="londonmap" SRC="images/londonmap.png" USEMAP="#london">
<map name="london">
<area id="dalston" href="#" shape="rect" coords="364,75,500,200"
      alt="Dalston Tube Stop" title="Dalston Area">
</map>

jQuery, который я использовал для нажатия и отмены щелчка, выглядит следующим образом:

$(document).ready(function()
{
    $('#dalston').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
 });

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

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
     });
 });

Проблема теперь в том, что только половина кода реагирует так, как я ожидал — исходное изображение исчезает, но второе никогда не занимает его место. Я предполагаю, что это как-то связано с порядком, в котором происходят события, но, будучи немного нубом в jQuery, я не могу сказать, что происходит не так.

Любая помощь будет очень признательна, так как это последнее, что мешает мне закончить карту!


jquery imagemap
person Casper F    schedule 23.05.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

На самом деле вы никогда не показываете элемент обратно после его исчезновения с помощью функции fadeToggle. Вы должны показать его обратно после того, как изображение было заменено.

ОБНОВИТЬ

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeOut('slow', function() {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        $('#londonmap').fadeIn('slow');
        });
    });
});

Или посмотрите рабочий пример здесь.

person Shomz    schedule 23.05.2012
comment
Спасибо за это! есть ли шанс, что вы могли бы сказать мне, что код для этого? - person Casper F; 23.05.2012
comment
Хорошо, см. это: jsfiddle.net/934n7/1 Конечно, изображения имеют неправильный размер и все такое. , но он должен работать так, как вы хотели. - person Shomz; 23.05.2012
comment
- спасибо большое чувак, очень приятно! Работает как по волшебству. Это немного сбоку. но если у вас есть время, это поможет - если бы я хотел отложить переход, чтобы он не стал белым, а затем показать замененное изображение, я бы использовал delay(); или установить время ожидания(); ? - person Casper F; 23.05.2012
comment
Пожалуйста! :) Я думаю, что delay() был бы лучшим вариантом здесь... что-то вроде: $('#londonmap').delay(2000).fadeIn('slow'); Вы также можете использовать setTimeout(), но он ведет себя по-другому и доставит вам больше проблем в этом примере. - person Shomz; 23.05.2012

arrow_upward
0
arrow_downward

Пытаться:

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        //show the image
        $('#londonmap').fadeToggle('slow');
    });
     });
 });
person strah    schedule 23.05.2012
comment
Привет @strah и спасибо за вклад! Я попробовал этот фрагмент кода, и теперь он, кажется, делает то же самое и короткое мерцание в конце, но второе изображение все еще не загружается... - person Casper F; 23.05.2012

arrow_upward
0
arrow_downward

Вы не сказали ему перевернуть переключатель, попробуйте это

$(document).ready(function() {

    $('#dalston').click(function() {

        $('#londonmap').fadeToggle('slow', function() {

            // select the image and determine what the next src will be
            var newImageSrc = $(this).attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

            // re-bind the src attribute and fade back in
            $(this).attr('src', newImageSrc).fadeToggle('slow');
        });
    });
});
person trapper    schedule 23.05.2012
comment
Привет @trapper! Как и в случае с кодом strah внизу, это, кажется, исчезает изображение, немного мерцает в конце, но не загружает второе изображение. Шомз подразумевал, что это потому, что это никогда не показывалось после того, как его поменяли местами? - person Casper F; 23.05.2012
comment
Не могли бы вы предоставить тестовый URL или jsfiddle? - person trapper; 23.05.2012
comment
Конечно, вот он: jsfiddle.net Область, по которой можно щелкнуть, находится где-то в правом верхнем углу, для демонстрации она сделана довольно большой. целей. - person Casper F; 23.05.2012
comment
Ваша ссылка отсутствует выше ^^ - person trapper; 23.05.2012