0

非常に単純な解決策は確かですが、私の人生ではうまくいきません！どんな助けでも大歓迎です...

基本的に、私はそれぞれ独自の「p」を持つ4つの「li」を持っています。jQueryを使用して、クラス「overlay」を使用して新しい「div」を作成し、各「p」をそれぞれの「div」に移動します。

これまでのところ、「div」を作成することができましたが、4つすべての「p」タグを4つすべての「div」にコピーすることになります。

http://jsfiddle.net/NhezT/4/にモックアップを配置しました

私のHTML：

<ul class="cat_ul">
    <li class="cat_li music_production">
        <div class="cat_bxs">
            <a href="#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Music Production</p>
    </li>
    <li class="cat_li web_development">
        <div class="cat_bxs">
            <a href="<#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Web Development</p>
    </li>
    <li class="cat_li online_promotion">
        <div class="cat_bxs">
            <a href="#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Online Promotion</p>
    </li>
    <li class="cat_li tutor_mentor">
        <div class="cat_bxs">
            <a href="#"><img class="cat_img" src="#"></a>
        </div>
        <p class="legend">Tutor And Mentor</p>
    </li>
</ul>​

私のCSS：

.cat_ul {
    list-style: none;
    width: 840px;
    margin: 0;
    padding: 0;
}
.cat_li {
    cursor: pointer;
    float: left;
    margin: 0 10px;
}
.cat_bxs {
    position: relative;
    width: 170px;
    height: 170px;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(rgba(255,255,255,0)), to(rgba(0,0,0,.15)));
    background: -webkit-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background: -moz-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background: -ms-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background: -o-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
    background-repeat: no-repeat;
}
.cat_bxs a {
    display: block;
}
.cat_bxs a img {
    width: 50%;
    height: 50%;
    margin: 25% 25%;
}
.cat_li .overlay {
    display: table;
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0;
    top: 0;
    padding: 10px;
    background: rgba(0,0,0,.5);
    opacity: 0;
}
.cat_li.music_production .overlay {
    background: rgba(216,182,24,.5);
}
.cat_li.web_development .overlay {
    background: rgba(92,164,64,.5);
}
.cat_li.online_promotion .overlay {
    background: rgba(166,66,66,.5);
}
.cat_li.tutor_mentor .overlay {
    background: rgba(41,140,191,.5);
}
.cat_li .overlay p {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    line-height: 2em;
    width: 100%;
    height: 100%;
    color: #333;
}​

私のJavaScript：

// Append Function (Broken)

$(document).ready(function () {
    $('.cat_bxs').append('<div class="overlay"></div>');

    $('.cat_li').each(function(){
        $(this).children('.legend').appendTo('.overlay');

    });
});


//Hover Fade

$(document).ready(function () {   
            $(".cat_bxs").hover(function () {
                $("a", this).animate({
                    "opacity": "0.25"
                }, 600, function () {
                    $(this).next(".overlay").animate({
                        "opacity": "1"
                    }, 500);
                });
            }, function () {
                var self = this;
                var inter = setInterval(function () {
                    if (!$(".overlay", self).is(':animated') && !$(".overlay", self).prev("a").is(':animated')) {
                        clearInterval(inter);
                        $(".overlay", self).animate({
                            "opacity": "0"
                        }, 500, function () {
                            $(this).prev("a").animate({
                                "opacity": "1"
                            }, 600);
                        });
                    }
                }, 100);
            });
});

よろしくお願いします...

4

1 に答える 1

1

これを試して：

$('.cat_li').each(function(){
    var $li = $(this);        
    $li.find('.legend').appendTo($li.find('.overlay'));
});
于 2012-05-18T10:27:22.053 に答える