Question

以下代码适用于我的本地计算机，但它不在我的生产网站taj.nl上（请参阅Aanbevolen producten部分下面的4个黑框）。

我没有看到控制台错误或其他错误。

在这里可以看到的效果是什么，标题在悬停时扩展：http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm

为什么不起作用？

<style type="text/css">

    a{ color:#C8DCE5;}
    h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

    .boxgrid{ 
        width: 280px; 
        height: 200px; 
        margin:10px; 
        float:left; 
        background:#161613; 
        border: solid 1px #8399AF; 
        overflow: hidden; 
        position: relative; 
    }
    .boxgrid img{ 
        position: absolute; 
        top: 0; 
        left: 0; 
        border: 0; 
        max-width:280px;
        max-height:200px;
    }
    .boxgrid p{ 
        padding: 0 10px; 
        color:#afafaf; 
        font-weight:bold; 
        font:10pt "Lucida Grande", Arial, sans-serif; 
    }

    .boxcaption{
        float: left;
        position: absolute;
        top:158px;
        background: #000;
        height: 100px;
        width: 100%;
        opacity: .8;
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
    }

    .boxcaption a
    {
        color:#FFF;
        font-weight:bold;

    }
    .boxcaption a:hover
    {
        text-decoration:underline;
        font-weight:bold;
    }


    .caption .boxcaption {
        top: 160;
        left: 0;
    }


</style>
<script type="text/javascript">
    $(document).ready(function () {
        //Caption Sliding (Partially Hidden to Visible)
        $('.boxgrid.caption').hover(function () {
            $(".cover", this).stop().animate({ top: '90px' }, { queue: false, duration: 160 });
        }, function () {
            $(".cover", this).stop().animate({ top: '160px' }, { queue: false, duration: 160 });
        });
    });
</script>



<div id="loadstatus"></div>

<script type="text/javascript" language="javascript">
    var newresult = '';
    //contentType: "application/json; charset=utf-8",
    $.ajax({
        type: "GET",
        url: "http://taj-ringen.webshopapp.com/blogs/magazine/?format=json",
        data: "",
        dataType: "json",
        error: function () {
            $("#loadstatus").html('Whoops! Onze blogs konden niet worden geladen, ververs de pagina ajb!');
        },
        success: function (mydata) {
            var i=0;
            for (var article in mydata.shop.blogs.magazine.articles) {
                if (i > 5) { break; }
                newresult += '<div class="boxgrid caption">';
                newresult += '<img src="https://static.webshopapp.com/shops/026820/files/' + ("00000" + mydata.shop.blogs.magazine.articles[article].image).slice(-9) + '/file.jpg"/>';
                newresult += '<div class="cover boxcaption">';
                newresult += '<h3>' + mydata.shop.blogs.magazine.articles[article].title + '</h3>';
                newresult += '<p>' + mydata.shop.blogs.magazine.articles[article].summary + '<br/><a href="http://www.taj.nl/' + mydata.shop.blogs.magazine.articles[article].url + '">Lees verder</a></p>';
                newresult += '</div>';
                newresult += '</div>';
                i++;
            }



            $("#loadstatus").html(newresult);
        }
    });

</script>

Answer 1

您的问题是，在document.ready事件中，您将悬停功能绑定到.boxgrid.caption divs尚未创建。我相信你正在制作一个ajax来创建它们。

对此的一个简单修复是将事件处理程序附加到success调用的ajax函数中。

success: function (mydata) {
    var i = 0;
    for (var article in mydata.shop.blogs.magazine.articles) {
        if (i > 5) {
            break;
        }
        newresult += '<div class="boxgrid caption">';
        newresult += '<img src="https://static.webshopapp.com/shops/026820/files/' + ("00000" + mydata.shop.blogs.magazine.articles[article].image).slice(-9) + '/file.jpg"/>';
        newresult += '<div class="cover boxcaption">';
        newresult += '<h3>' + mydata.shop.blogs.magazine.articles[article].title + '</h3>';
        newresult += '<p>' + mydata.shop.blogs.magazine.articles[article].summary + '<br/><a href="http://www.taj.nl/' + mydata.shop.blogs.magazine.articles[article].url + '">Lees verder</a></p>';
        newresult += '</div>';
        newresult += '</div>';
        i++;
    }

    $("#loadstatus").html(newresult);
    $('.boxgrid.caption').hover(function () {
        $(".cover", this).stop().animate({
            top: '90px'
        }, {
            queue: false,
            duration: 160
        });
    }, function () {
        $(".cover", this).stop().animate({
            top: '160px'
        }, {
            queue: false,
            duration: 160
        });
    });
}

另一种选择是使用event delegation（on） -

$("#loadstatus").on('hover', '.boxgrid.caption', function () {
    $(".cover", this).stop().animate({
        top: '90px'
    }, {
        queue: false,
        duration: 160
    });
}, function () {
    $(".cover", this).stop().animate({
        top: '160px'
    }, {
        queue: false,
        duration: 160
    });
});

如果您计划在loadstatus容器中加载更多动态内容并希望同时拥有动画，则事件委派将特别有用。

鼠标悬停不会在生产环境中触发jquery动画

1 个答案: