Question

我目前正在尝试使用css3创建;当你将鼠标悬停在它上面时，一个盒子向下滑动，另一个向上滑动。它们将滑过图像并包含有关图像和其他内容的内容。

我找到了一些很好的教程，但没有找到我正在寻找的东西，不管怎么说都不是。我一直在谷歌上搜索一段时间，所以我只是想知道是否有人可以指点我一个好的教程或者可以帮助我吗？

jQuery的：

$(document).ready(function () {
var thumbs = $("ul li img");
for (var i = 0, ii = thumbs.length; i < ii; i++) {
    if (thumbs[i].title && thumbs[i].title.length > 0) {
        var imgtitle = thumbs[i].title;
        $(thumbs[i]).wrap('<div class="wrapper" />').after('<div class=\'caption\'>' + imgtitle + '</div>').removeAttr('title');
    }
}

$('.wrapper').hover(function () {
    $(this).find('img').animate({
        opacity: ".6"
    }, 300);
    $(this).find('.caption').animate({
        top: "-85px"
    }, 300);
}, function () {
    $(this).find('img').animate({
        opacity: "1.0"
    }, 300);
    $(this).find('.caption').animate({
        top: "85px"
    }, 100);
});
});

CSS：

* {
    padding:0;
    margin:0;
}
#main {
    width:790px;
    border:1px solid #CCCCCC;
    overflow:hidden;
    margin:0 auto;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:30px;
    margin-top:30px;
}
#main h3 {
    font-family:'Droid Sans', arial;
    font-weight:bold;
    font-size:50px;
    letter-spacing:-2px;
    text-shadow:1px 2px 2px #999;
    padding:0 8px;
}
#main p {
    font-family:Georgia, arial;
    font-size:16px;
    background:#ececec;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:20px;
    border:1px solid #d2d2d2;
    clear:both;
    margin:25px 8px;
    text-shadow:0 1px 1px #fff;
}
#main a {
    float:right;
    font-family:Georgia;
    font-size:16px;
    text-decoration:none;
    color:#990000;
    position:relative;
    left:-20px;
    padding:25px 0 0 0;
}
ul {
    padding:0;
    margin:0;
}
ul li {
    float:left;
    list-style:none;
    padding:10px;
    margin:10px;
    line-height:10px;
    width:218px;
    height:218px;
    overflow:hidden;
    border:1px solid #d2d2d2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#ececec;
}
/*dynamically added*/
 div.wrapper {
    width:218px;
    height:218px;
    overflow:hidden;
    position:relative;
}

div.caption {
    font-family:'Reenie Beanie', arial;
    font-weight:bold;
    font-size:34px;
    letter-spacing:-2px;
    position:relative;
    text-align:center;
    padding:55px 15px 15px 15px;
    background:url(images/caption-bg.png) repeat-x;
    min-height:125px;
    color:#d20000;
    text-shadow:0 1px 1px #999;
    text-transform:capitalize;
    line-height:16px;
}
ul li:nth-child(1) div.caption {
    font-family:'Reenie Beanie', arial;
    font-weight:bold;
    font-size:34px;
    letter-spacing:-2px;
    position:relative;
    text-align:center;
    padding:55px 15px 15px 15px;
    background:url(images/caption-bg.png) repeat-x;
    min-height:125px;
    color:#d20000;
    text-shadow:0 1px 1px #999;
    text-transform:capitalize;
    line-height:16px;
}
ul li:nth-child(2) div.caption {
    font-family: arial;
    font-weight:bold;
    font-size:26px;
    position:relative;
    text-align:center;
    padding:45px 15px 15px 15px;
    background:url(images/city.png);
    min-height:125px;
    color:#fff;
    text-shadow:1px 2px 1px #999;
    letter-spacing:-1px;
    text-transform:capitalize;
    line-height:16px;
}

ul li:nth-child(3) div.caption {
    font-family: Georgia, arial;
    font-weight:bold;
    font-size:24px;
    font-style:italic;
    position:relative;
    text-align:center;
    padding:35px 15px 15px 15px;
    background:url(images/wood.png);
    min-height:125px;
    color:#fff;
    text-shadow:1px 2px 1px #000;
    letter-spacing:-1px;
    text-transform:capitalize;
    line-height:16px;
}
ul li:nth-child(4) div.caption {
    font-family:'Droid Sans', arial;
    font-weight:bold;
    font-size:30px;
    position:relative;
    text-align:center;
    padding:15px;
    background:url(images/grass.png) repeat-x;
    min-height:125px;
    color:#fff;
    text-shadow:1px 2px 1px #000;
    text-transform:capitalize;
    line-height:30px;
}
ul li:nth-child(5) div.caption {
    font-family:'Lobster', arial;
    font-weight:bold;
    font-size:30px;
    position:relative;
    text-align:center;
    padding:38px 15px 15px 15px;
    background:url(images/green.png) repeat-x;
    min-height:125px;
    color:#fff;
    text-shadow:1px 2px 1px #ff4e00;
    text-transform:capitalize;
    line-height:16px;
}
ul li:nth-child(6) div.caption {
    font-family:'IM Fell English SC', arial;
    font-weight:bold;
    font-size:30px;
    position:relative;
    text-align:center;
    padding:35px 0 0 0px;
    background:url(images/grunge.png);
    min-height:125px;
    color:#fff;
    line-height:30px;
    letter-spacing:-2px;
}

Answer 1

由于hover元素是动态添加的，因此wrapper事件无效。 click()或hover()等事件只能在加载页面时附加到DOM中已有的元素。
要将事件附加到动态添加的元素，您可以使用on()将事件从已经在DOM中的父元素转移到添加的元素 - 例如要将click()事件附加到已添加div的课程wrapper $(".wrapper").click(function(){...});不起作用，您可以使用on()代理该事件，如下所示：

$(document).on("click", ".wrapper", function(){...});

而不是$(document)可以使用添加的.wrapper的每个父元素来委派事件 - 如果#main是示例中的父元素，则可以附加{{1}与hover() mouseenter和mouseleave事件如下：

on()

我刚刚在这个Fiddle

中添加了CSS和调整过的脚本以及一些示例HTML

正如您在问题中提到的，您尝试使用CSS3使用标题为$("#main").on( { mouseenter: function() { /* your animations */ }, mouseleave: function() { /* your animations */ } }, ".wrapper");设置动画，我已调整此Fiddle以使用CSS过渡而不是jQuery显示相同的动画。例如。为动画字幕设置它只是

div

更新：对于评论中的附加问题，如何将.caption { top:0; transition: 1s; } .wrapper:hover .caption { transition: 1s; top: -85px; }调整为实际图像大小 - 2个解决方案。对于这两者，请删除您为wrapper和width设置的height和ul li的值。

1：您可以为每张图片设置图像大小和宽度：

div.wrapper

并获取函数中已经检索标题并将值设置为图像包装器的部分中的值：

<img title="cat" width="300" height="200" src="http://placekitten.com/g/300/200" />

Fiddle此版本。

2：您可以检索实际的图像宽度和高度

if (thumbs[i].title && thumbs[i].title.length > 0) {
      var imgtitle = thumbs[i].title;
      var imgwidth = thumbs[i].width;
      var imgheight = thumbs[i].height;
      $(thumbs[i]).wrap('<div class="wrapper" style="height:' 
      + imgheight + 'px; width:' + imgwidth + 'px;" />')
      .after('<div class=\'caption\'>' + imgtitle + '</div>').removeAttr('title');
}

因为执行函数时图像不在DOM中，所以不可能使用jQuery函数$(document).ready(function () { var thumbs = $("ul li img"); for (var i = 0, ii = thumbs.length; i < ii; i++) { if (thumbs[i].title && thumbs[i].title.length > 0) { var imgtitle = thumbs[i].title; var imgsrc = thumbs[i].src; var image = $("<img />"); image.attr("src", imgsrc + "?" + new Date().getTime()); image.on("load", { current: thumbs[i] }, function (event) { var imgwidth = this.width; var imgheight = this.height; $(event.data.current).wrap('<div class="wrapper" style="height:' + imgheight + 'px; width:' + imgwidth + 'px" />') .after('<div class=\'caption\'>' + imgtitle + '</div>').removeAttr('title'); }); } } });和width()来获取图像的宽度和大小。但是可以创建一个jQuery图像对象

height()

并将var image = $("<img />");循环中当前图像的来源设置为此图像：

for

向图像添加var imgsrc = thumbs[i].src; image.attr("src", imgsrc + "?" + new Date().getTime());可防止从浏览器缓存中检索图像并实际加载（例如，如果您为同一尺寸的新图像使用相同的图像名称）。

使用已知的"?" + new Date().getTime());：

将load事件附加到此图片

on()

将当前图像作为附加参数：image.on("load", {current: thumbs[i]}, function (event) { .... });

此参数可在{ current: thumbs[i] }内function(event){..}内访问，当前图片 - event.data将被检索为thumbs[i]。因此，event.data.current事件函数内的$(event.data.current).wrap(..);与当前图像的load相同。

Fiddle此版本。

Css在悬停时向上和向下滑动图像

1 个答案: