1

ほとんどの作業フィドル --> http://jsfiddle.net/7nrZ6/40/

    $('#inav .opt').mouseover(function(){
    $(this).animate({opacity:1});
});
$('.opt').mouseout(function(){
    if($(this).hasClass('selected'))
    {
        $(this).animate({opacity:1});
    }
    else
    {
        $(this).animate({opacity:.25});
    }
});
$('.opt').click(function(){
    if(!$(this).hasClass('selected'))
    {                
        $('.selected').animate({opacity:.25});
        $('.opt').removeClass('selected');
        $(this).addClass('selected'); 
        $(this).animate({opacity:1});
    }
});

$("#buttons img").click(function () {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#page-" + id).css("display", "block");
});

私のフィドルはほとんど機能しています。最後に 2 つの質問があります。

マウスオーバー/アウト アニメーションがスタックしているように見えるので、マウスをその上で何度も振ると、オーバー/アウトを登録した回数に応じてアニメーションが再生されます。ちょっと面倒。以前は停止機能でホバーを使用していましたが、それでクリック部分を行う方法がわかりませんでした。登録をスタックオーバー/アウトしないように設定するにはどうすればよいですか?

最初はすべてのコンテンツ div を非表示にしてから、ボタンのクリックに応じて表示/非表示にします。現在のように、それらはすべて表示されます。#pages id を何も表示しないように設定すると、ボタンをクリックしてもページが再表示されません。この種の機能にJSが必要かどうかはわかりません。もっと簡単な方法があればアドバイスお願いします。

これらは簡単な修正であると確信しています。学びながら学んでいます。どんな助けでも大歓迎です！

4

1 に答える 1

3

このような？

デモ

この css ルールを使用して非表示にすることができます。

#pages > div[id^="page"]
{
    display:none;
}

また、mouseenter/mouseleave(This is actual hover ) の代わりにmouseover/mouseout使用.stop()して、以前のアニメーションを頻繁にホバーで実行しないようにクリーンアップし、次のように単純化することができます。

$('#inav .opt').mouseenter(function(){
    $(this).stop().animate({opacity:1});
}).mouseleave(function(){
    $(this).stop().animate({opacity: $(this).is('.selected') ? 1 : .25});
});

$('.opt').click(function(){
    var $this = $(this);
    if(!$this.is('.selected'))
    {                
        $('.selected').stop().animate({opacity:.25}); 
        $('.opt').removeClass('selected');
        $this.addClass('selected').stop().animate({opacity:1}); 
    }
});

$("#buttons img").click(function () {
    $("#page-" + this.id).show().siblings('div[id^="page"]').hide();
});
于 2013-07-11T22:11:59.880 に答える