Каждое изменение изображения с плавным появлением / исчезновением

У меня есть jQuery-код. На сайте 2 изображения, каждое изображение имеет 3 версии. 1 по умолчанию, 1 при наведении и 1 при клике. После щелчка изображение остается до тех пор, пока не будет нажато другое, затем оно возвращается к версии 1. Код jQuery исправляет это с помощью различных операторов if и условий.

Смена изображений выглядит намного лучше с плавным переходом от одного изображения к другому. Но как я могу исправить, чтобы каждое изменение изображений отображалось с плавным появлением / исчезновением?

Вот мой код кстати

JS:

var clicked = false;
var klick = false;

$("img#hovertom").click(function () {
    if (clicked) clicked = true;
    else $(this).attr("src", "../img/tom_effects.png");
    if (clicked = true) $(this).attr("src", "../img/tom_effects.png");
    if (clicked = true) $("img#hoverdaniel").attr("src", "../img/daniel.png");
    if (clicked = true) klick = false;
});    

$("img#hovertom").hover(function () {
    if (!clicked) $(this).attr("src", "../img/tom_hover.png");
}, function () {
    if (!clicked) $(this).attr("src", "../img/tom.png");
});

$("img#hoverdaniel").click(function () {
    if (klick) klick = true;
    else $(this).attr("src", "../img/daniel_effects.png");
    if (klick = true) $(this).attr("src", "../img/daniel_effects.png");
    if (klick = true) $("img#hovertom").attr("src", "../img/tom.png");
    if (klick = true) clicked = false;
});

$("img#hoverdaniel").hover(function () {
    if (!klick) $(this).attr("src", "../img/daniel_hover.png");
}, function () {
    if (!klick) $(this).attr("src", "../img/daniel.png");
});

HTML:

<img src="../img/tom.png" alt="tom" width="450" height="450" class="clicktom" id="hovertom">
<img src="../img/daniel.png" alt="daniel" width="450" height="450" class="hover3" id="hoverdaniel">

CSS:

#hovertom{
  float: left;
  cursor: pointer;
}

#hoverdaniel{
  float: right;
  cursor: pointer;
}

image jquery fadein fadeout fade
person Tom Te    schedule 01.07.2013    source источник
comment
поделитесь кодом html и css   -  person Bhushan Kawadkar    schedule 01.07.2013
comment
‹img src=../img/tom.png alt=tom width=450 height=450 class=clicktom id=hovertom› ‹img src=../img/daniel.png alt=daniel width=450 height=450 class =hover3 id=hoverdaniel›   -  person Tom Te    schedule 01.07.2013
comment
#hovertom{ поплавок: влево; курсор: указатель; } #hoverdaniel{ float: right; курсор: указатель; }   -  person Tom Te    schedule 01.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

Ваши операторы if всегда верны. Измените if (klick = true) на if (klick) и if (clicked = true) на if (clicked).

Прямо сейчас вы устанавливаете klick и clicked на true каждый раз, когда пытаетесь проверить значение.

Для постепенного появления и исчезновения:

var fadeImage = function(el, to) {
    var img = $(el);
    // get the offset of the original image
    var offset = img.offset();
    // clone the original image, position it absolutely, and fade
    var oldImg = img.clone().css(offset).appendTo('body')
        .fadeTo(400, 0, function() {
            oldImg.remove();
        });
    // change the image to the new source.
    img.attr('src', to);
};

$("img#hovertom").hover(function () {
    if (!clicked) fadeImage(this, "../img/tom_hover.png");
}, function () {
    if (!clicked) fadeImage(this, "../img/tom.png");
});

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

person kalley    schedule 01.07.2013
comment
Я поместил код в свой .js, но исчезновение изображения происходит в случайном месте на странице, а не в том же месте, что и предыдущее изображение... - person Tom Te; 01.07.2013
comment
Случайно или каждый раз в одном и том же месте? У вас есть поля на изображениях или что-то в этом роде? offset получает положение относительно документа, но не принимает во внимание поля, границы или отступы. - person kalley; 01.07.2013
comment
Не случайно, но я думаю, что точно не знаю, как я могу добавить постепенное появление в свой код. Теперь код: - person Tom Te; 01.07.2013