Question

构建我的第一个JQuery代码片段之一，隐藏一些图像并淡入一些文本，似乎工作得很好，直到你的鼠标快速移动，似乎重复。

我需要一些新鲜的眼睛，因为我已经有一段时间了，我是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;
}

Answer 1

这是因为动画的异步性......你可以强制jQuery通过在fadeIn（）和fadeOut（）之类的方法之前调用.stop（）来完成动画

$(".title.one").stop(true, true).fadeIn(500).css('display', 'inline-block');

JQuery淡入代码有导致循环的bug

1 个答案: