0

构建我的第一个 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;
}
4

1 回答 1

3

这是因为动画的异步性质....您可以强制 jQuery 通过调用 .stop() 在像 fadeIn() 和 fadeOut() 这样的方法之前完成动画

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