0

私は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;
}
4

1 に答える 1

0

あなたのifステートメントは常に真です。とに変更if (klick = true)します。if (klick)if (clicked = true)if (clicked)

現在、値を確認しようとするたびにklickandを設定しています。clickedtrue

フェードインとフェードアウトの場合:

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");
});

マウスエンターの直後にマウスを離すと、フェードが発生し続けるので、これはまさに始まりです。うまくいけば、それで十分です。

于 2013-07-01T17:26:22.267 に答える