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

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的div尚未创建。我相信您正在进行ajax调用来创建它们。

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

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
});
});
}

另一种选择是使用事件委派(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容器中加载更多动态内容，并且希望在这些内容上也有动画，则事件委派将特别有用。