0

私の最初の JQuery コード スニペットの 1 つを作成して、一部の画像を非表示にし、一部のテキストをフェードインします。

私はこれにしばらく取り組んでおり、JQuery は初めてなので、何かアドバイスをいただければ幸いです。

サイトへのリンクと、関連する JQuery および CSS を含めました。

現在開発中のサイト

不透明度とフェード用の JQuery

    $(document).ready(function ()
{

    //on hover change opacity of other images
    $("#slider ul li").delegate("img", "mouseover mouseout", function (e)
    {
        $("#slider ul li img").not(this).css("opacity", e.type == 'mouseover' ? 0.3 : 1);
    });

    //Fade in text located in span
    $(".img_left").hover(function ()
    {
        $(".title.one").fadeIn(500).css('display', 'inline-block');
        $(".description.one").fadeIn(700).css('display', 'inline-block');
    }, function ()
    {
        $(".title.one").fadeOut(50).css('display', 'inline-block');
        $(".description.one").fadeOut(50).css('display', 'inline-block');
    });

    $(".img_center").hover(function ()
    {
        $(".title.two").fadeIn(500).css('display', 'inline-block');
        $(".description.two").fadeIn(700).css('display', 'inline-block');
    }, function ()
    {
        $(".title.two").fadeOut(50).css('display', 'inline-block');
        $(".description.two").fadeOut(50).css('display', 'inline-block');

    });
});

JQuery に関連する CSS

#slider ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#slider ul li {
    text-align: left;
    left: -375px;
    bottom: 25px;
    display: inline;
}

#slider ul li a
{
    text-decoration: none;
    padding: .2em 1em;
    color: #FFF;
    background-color: #000;
}

#slider ul li a:hover
{
    color: #FFF;
    background-color: #000;
}


.title {
    width: 300px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    z-index: 100;
    position: relative;
    color: #ED8E29;
    display: none;
}

.description {
    width: 300px;
    font-size: 12px;
    z-index: 100;
    position: relative;
    color: #ED8E29;
    display: none;
}            

.title.one {
    top: 150px;
    right: -20px;
}      

.description.one {
top: 200px;
right: 260px;
}

.title.two {
    top: 130px;
    right: -350px;
}

.description.two {
    top: 200px;
    left: 70px;
}
4

1 に答える 1

3

これは、アニメーションの非同期の性質によるものです....fadeIn()やfadeOut()などのメソッドの前に.stop()を呼び出すことで、jQueryにアニメーションを強制的に完了させることができます

$(".title.one").stop(true, true).fadeIn(500).css('display', 'inline-block');
于 2013-10-25T04:45:32.217 に答える