0

私は小さなページに取り組んで、ある種のインタラクティブな地図を作成しています。現在のサイトは最終製品を代表するものではなく、サイトの根幹とコーディングのセットアップを行っているだけです。私はまた、一般的にWebコーディングに非常に慣れていません。

これが私の問題です。

ボタンのクリックに基づいてjqueryを使用して、一連の画像をフェードインおよびフェードアウトさせようとしています。フェードイン/フェードアウトは、ボタンを下に進むと完全に機能するように見えますが、反対方向に進むと、フェードインは正常に機能しますが、フェードアウトはすぐに行われるようです. ボタンのクリックの方向に関係なく、フェードイン/フェードアウトが均一であることを望みますが、コーディングがこのように機能する理由を見つけることができないようです。

すべてのソース コードのライブ リンクは次のとおりです: http://users.humboldt.edu/eibenm/sheepallenge.html

問題は次のセクションにあると思います。

$(document).ready(function() {
    $('#Image1').fadeIn(1500);
})      

$(button1).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image1').fadeIn(1500);
}); 

$(button2).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image2').fadeIn(1500);
}); 

$(button3).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image3').fadeIn(1500);
}); 

$(button4).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image4').fadeIn(1500);
}); 

$(button5).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image5').fadeIn(1500);
}); 

$(button6).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image6').fadeIn(1500);
}); 

$(button7).click(function() {
    $('#sins img').fadeOut('slow');
    $('#Image7').fadeIn(1500);
});
4

1 に答える 1

0

反復的なインライン スタイル、JQuery、および HTML コードが多数あります。より小さなフォームに凝縮できます。

// すべての画像リンクにクラスを割り当てます

.links
{
    width : 130px;
    height : 49px;
    opacity: 0.5;
}

<img src="Images/1Lust.png" class="links" id="button1">

//  Assign a class to all the images as a Whole
.images
{
    width : 880px;
    height : 600px;
    display: none;
}
<img src="Images/Deadly Sin 1.jpg" class="images">

JavaScript // このブロックはボタンを不透明にします

$(document).ready(function() {
    $('a img').animate({
        opacity: .5
    });
    // will change opacity to 1 on hover and back to .5 when not 
    $('a img').hover(function() {
        $(this).stop().animate({
            opacity: 1
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            opacity: .5
        }, 'fast');

    });

    $('#Image1').fadeIn(1500); 

    // Assign the click event to All the id's that start with button
    $('[id^="button"]').on('click', function() {
        //  fade Out All the images inside sins
        $('#sins img').fadeOut('slow');
        // Find the index of the element that was clicked
        var $index = $('#links').find(this).index();
        // Show the corresponding image
        $('#sins img:eq('+ ($index + 1) + ')').fadeIn(1500);
    });
});
于 2012-10-30T23:04:24.750 に答える